Changes
Jump to navigation
Jump to search
Template:Color contrast conformance/doc (view source)
Revision as of 02:28, 18 November 2018
, 5 years agonote module and template used
{{Documentation subpage}}
<!--Categories where indicated at the bottom of this page, please; interwikis at Wikidata (see [[Wikipedia:Wikidata]])-->
{{Lua|Module:Color contrast}}<!-- via Template:Color contrast ratio -->
== Usage ==
The '''[[Template:{{BASEPAGENAME}}]]''' gives a "AAA", "AA" or "none" judgment for the level of conformance to [[WCAG 2.0]] of two colors together, in terms of contrast ratio, where the colors can be either [[RGB color model|RGB]] <code>#numbers</code> (<code>#56F3BB</code>) or color names (<code>green</code>, <code>darkorange</code>, or <code>NavahoWhite</code>, etc.).
{| class="wikitable"
|-
! Code !! Result
|-
| {{tlx|{{BASEPAGENAME}}|blue|white}} || {{{{BASEPAGENAME}}|blue|white}}
|-
| {{tlx|{{BASEPAGENAME}}|red|#FFcc00}} || {{{{BASEPAGENAME}}|red|#FFcc00}}
|-
| {{tlx|{{BASEPAGENAME}}|black|White|show{{=}}no}} || {{{{BASEPAGENAME}}|black|White|show=no}}
|}
Either parameter 1 or 2 can be a standard color name (in upper/lowercase letters) or an RGB <code>#number</code>, such as: <code>#FF45BB</code>. See: [[Web colors]], for a full list of color names and the assigned RGB <code>#number</code> values. The option "<code>show=no</code>" will suppress showing the color names or numbers, and give just the "AAA", "AA" or "none" answer.
== HTML colors ==
{| class="wikitable sortable"
|+ Accessibility of pairs of HTML colors
|-
! !! {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call=Color sample}}
|-
| {{Color sample|black}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=black|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|navy}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=navy|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|maroon}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=maroon|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|purple}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=purple|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|blue}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=blue|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|green}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=green|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|teal}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=teal|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|olive}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=olive|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|red}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=red|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|gray}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=gray|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|fuchsia}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=fuchsia|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|orange}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=orange|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|silver}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=silver|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|lime}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=lime|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|aqua}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=aqua|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|yellow}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=yellow|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|white}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=white|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|}
==Supporting template==
* {{tl|Color contrast ratio}}, gives ratio number — uses {{m2|Color contrast|ratio}}
==See also==
* {{tl|ColorToLum}}, gives luminance value of a color
* [[Wikipedia:WikiProject Accessibility]]
==External links==
* [http://trace.wisc.edu/contrast-ratio-examples/ Index of Color Contrast Samples]
<includeonly>
<!--Categories below this line, please; interwikis at Wikidata-->
{{DEFAULTSORT:Color Contrast Visible}}
[[Category:Color templates]]
</includeonly>
<!--Categories where indicated at the bottom of this page, please; interwikis at Wikidata (see [[Wikipedia:Wikidata]])-->
{{Lua|Module:Color contrast}}<!-- via Template:Color contrast ratio -->
== Usage ==
The '''[[Template:{{BASEPAGENAME}}]]''' gives a "AAA", "AA" or "none" judgment for the level of conformance to [[WCAG 2.0]] of two colors together, in terms of contrast ratio, where the colors can be either [[RGB color model|RGB]] <code>#numbers</code> (<code>#56F3BB</code>) or color names (<code>green</code>, <code>darkorange</code>, or <code>NavahoWhite</code>, etc.).
{| class="wikitable"
|-
! Code !! Result
|-
| {{tlx|{{BASEPAGENAME}}|blue|white}} || {{{{BASEPAGENAME}}|blue|white}}
|-
| {{tlx|{{BASEPAGENAME}}|red|#FFcc00}} || {{{{BASEPAGENAME}}|red|#FFcc00}}
|-
| {{tlx|{{BASEPAGENAME}}|black|White|show{{=}}no}} || {{{{BASEPAGENAME}}|black|White|show=no}}
|}
Either parameter 1 or 2 can be a standard color name (in upper/lowercase letters) or an RGB <code>#number</code>, such as: <code>#FF45BB</code>. See: [[Web colors]], for a full list of color names and the assigned RGB <code>#number</code> values. The option "<code>show=no</code>" will suppress showing the color names or numbers, and give just the "AAA", "AA" or "none" answer.
== HTML colors ==
{| class="wikitable sortable"
|+ Accessibility of pairs of HTML colors
|-
! !! {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call=Color sample}}
|-
| {{Color sample|black}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=black|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|navy}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=navy|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|maroon}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=maroon|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|purple}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=purple|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|blue}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=blue|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|green}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=green|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|teal}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=teal|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|olive}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=olive|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|red}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=red|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|gray}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=gray|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|fuchsia}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=fuchsia|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|orange}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=orange|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|silver}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=silver|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|lime}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=lime|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|aqua}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=aqua|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|yellow}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=yellow|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|-
| {{Color sample|white}} || {{for loop| {{!!}} |white|yellow|aqua|lime|silver|orange|fuchsia|gray|red|olive|teal|green|blue|purple|maroon|navy|black|call={{BASEPAGENAME}}|pc1n=1|pc1v=white|pc2n=show|pc2v=no|pc3n=3|pc3v={{na}}|pv=2}}
|}
==Supporting template==
* {{tl|Color contrast ratio}}, gives ratio number — uses {{m2|Color contrast|ratio}}
==See also==
* {{tl|ColorToLum}}, gives luminance value of a color
* [[Wikipedia:WikiProject Accessibility]]
==External links==
* [http://trace.wisc.edu/contrast-ratio-examples/ Index of Color Contrast Samples]
<includeonly>
<!--Categories below this line, please; interwikis at Wikidata-->
{{DEFAULTSORT:Color Contrast Visible}}
[[Category:Color templates]]
</includeonly>
