Difference between revisions of "Template:Color contrast conformance"
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_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}}}, | + | |Contrast: {{{1|blue}}} & {{{2|orange}}}, conformance level= |
| − | }}{{#ifexpr: {{color contrast ratio|{{{1|blue}}}|{{{2|orange}}} }} < 0.222 or {{color contrast ratio|{{{1|blue}}}|{{{2|orange}}} }} > 4.5| | + | }}{{#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
| 30px | This template uses Lua: |
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
| 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
- {{Color contrast ratio}}, gives ratio number — uses {{#invoke:Color contrast|ratio}}
See also
- {{ColorToLum}}, gives luminance value of a color
- Wikipedia:WikiProject Accessibility
External links
| The above documentation is transcluded from Template:Color contrast conformance/doc. (edit | history) Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages. Please add categories to the /doc subpage. Subpages of this template. |