Difference between revisions of "Template:Color contrast conformance"

From blackwiki
Jump to navigation Jump to search
imported>He7d3r
m (Helder.wiki moved page Template:Color contrast visible to Template:Color contrast conformance: Makes more sense for return values such as "AAA", "AA" and "none")
imported>He7d3r
(Returning conformance levels AAA and AA, or none if there is no conformance to the WCAG20)
Line 1: Line 1:
 
<noinclude><!--
 
<noinclude><!--
-======================================================================
+
-===========================================================================================
Color_contrast_visible - give yes/no for acceptable color contrast
+
Color_contrast_conformance - give levels AAA, AA and none for acceptable color contrast
-======================================================================
+
-===========================================================================================
 
--
 
--
 
--></noinclude>{{#ifeq:{{{show|yes}}}|no|
 
--></noinclude>{{#ifeq:{{{show|yes}}}|no|
   |Contrast: {{{1|blue}}} & {{{2|orange}}}, visible =&nbsp;
+
   |Contrast: {{{1|blue}}} & {{{2|orange}}}, conformance level=&nbsp;
}}{{#ifexpr: {{color contrast ratio|{{{1|blue}}}|{{{2|orange}}} }} < 0.222 or {{color contrast ratio|{{{1|blue}}}|{{{2|orange}}} }} > 4.5|yes|no
+
}}{{#ifexpr: {{color contrast ratio|{{{1|blue}}}|{{{2|orange}}} }} <= 0.14285 or {{color contrast ratio|{{{1|blue}}}|{{{2|orange}}} }} >= 7
 +
    |AAA
 +
    |{{#ifexpr: {{color contrast ratio|{{{1|blue}}}|{{{2|orange}}} }} <= 0.222 or {{color contrast ratio|{{{1|blue}}}|{{{2|orange}}} }} >= 4.5
 +
      |AA
 +
      |none
 +
    }}
 
}}<noinclude>{{documentation}}</noinclude>
 
}}<noinclude>{{documentation}}</noinclude>

Revision as of 15:42, 22 July 2014

Contrast: blue & orange, conformance level= none

50px Template documentation[view] [edit] [history] [purge]

Usage

The Template:Color contrast conformance 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 #numbers (#56F3BB) or color names (green, darkorange, or NavahoWhite, etc.).

Code Result
{{Color contrast conformance|blue|white}} Contrast: blue & white, conformance level= AAA
{{Color contrast conformance|red|#FFcc00}} Contrast: red & #FFcc00, conformance level= none
{{Color contrast conformance|black|White|show=no}} AAA

Either parameter 1 or 2 can be a standard color name (in upper/lowercase letters) or an RGB #number, such as: #FF45BB. See: Web colors, for a full list of color names and the assigned RGB #number values. The option "show=no" will suppress showing the color names or numbers, and give just the "AAA", "AA" or "none" answer.

HTML colors

Accessibility of pairs of HTML colors
AAA AAA AAA AAA AAA AAA AA AA AA AA none none none none none none none
AAA AAA AAA AAA AAA AAA AA none none none none none none none none none none
AAA AAA AAA AAA AA AA none none none none none none none none none none none
AAA AAA AAA AA AA AA none none none none none none none none none none none
AAA AAA AA AA AA none none none none none none none none none none none none
AA AA none none none none none none none none none none none none none none none
AA none none none none none none none none none none none none none none none none
none none none none none none none none none none none none none none none none AA
none none none none none none none none none none none none none none none none AA
none none none none none none none none none none none none none none none none AA
none none none none none none none none none none none none none none none AA AA
none none none none none none none none none none none none none AA AA AAA AAA
none none none none none none none none none none none none AA AA AA AAA AAA
none none none none none none none none none none none none AA AA AAA AAA AAA
none none none none none none none none none none none none AA AAA AAA AAA AAA
none none none none none none none none none none none AA AAA AAA AAA AAA AAA
none none none none none none none none none none AA AA AAA AAA AAA AAA AAA

Supporting template

See also

External links