Difference between revisions of "Template:Color contrast conformance"

From blackwiki
Jump to navigation Jump to search
imported>Wikid77
(created, as a utility template, to offer judgment about visibility contrast of 2 colors, as names and/or RGB #numbers)
 
imported>He7d3r
m (moved to /doc)
Line 7: Line 7:
 
   |Contrast: {{{1|blue}}} & {{{2|orange}}}, visible = 
 
   |Contrast: {{{1|blue}}} & {{{2|orange}}}, visible = 
 
}}{{#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.222 or {{color contrast ratio|{{{1|blue}}}|{{{2|orange}}} }} > 4.5|yes|no
}}<noinclude>
+
}}<noinclude>{{documentation}}</noinclude>
{{documentation|content=
 
 
 
The '''[[Template:Color_contrast_visible]]''' gives a yes/no judgment as to the acceptability of two colors together, in terms of contrast ratio, where the colors can be either [[RGB color model|RGB]] #numbers (#56F3BB) or color names (green, darkorange, or NavahoWhite, etc.).
 
 
 
:'''Usage:'''&nbsp;&nbsp;&nbsp;<nowiki>{{Color_contrast_visible|blue|white}}</nowiki>{{j|&nbsp; &rarr; {{Color_contrast_visible|blue|white}} }}
 
:::: <nowiki>{{Color_contrast_visible|red|#FFcc00}}</nowiki> {{j|&nbsp; &rarr; {{Color_contrast_visible|red|#FFcc00}} }}
 
:::: <nowiki>{{Color_contrast_visible |black|White|show=no}}</nowiki> {{j|&nbsp; &rarr; {{Color_contrast_visible |black|White|show=no}} }}
 
 
 
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 "yes" or "no" answer.
 
 
 
; See also
 
* {&#123;[[Template:Color contrast ratio|color contrast ratio]]&#125;}, gives ratio number
 
* {&#123;[[Template:ColorToLum|ColorToLum]]&#125;}, gives luminance value of a color
 
 
 
}}
 
{{DEFAULTSORT:Color Contrast Visible}}
 
[[Category:Wikipedia formatting and function templates]]
 
 
 
</noinclude>
 

Revision as of 16:55, 19 July 2014

Contrast: blue & orange, visible = no

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, visible = yes
{{Color contrast conformance|red|#FFcc00}} Contrast: red & #FFcc00, visible = no
{{Color contrast conformance|black|White|show=no}} yes

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
yes yes yes yes yes yes yes yes yes yes no no no no no no no
yes yes yes yes yes yes yes no no no no no no no no no no
yes yes yes yes yes yes no no no no no no no no no no no
yes yes yes yes yes yes no no no no no no no no no no no
yes yes yes yes yes no no no no no no no no no no no no
yes yes no no no no no no no no no no no no no no no
yes no no no no no no no no no no no no no no no no
no no no no no no no no no no no no no no no no yes
no no no no no no no no no no no no no no no no yes
no no no no no no no no no no no no no no no no yes
no no no no no no no no no no no no no no no yes yes
no no no no no no no no no no no no no yes yes yes yes
no no no no no no no no no no no no yes yes yes yes yes
no no no no no no no no no no no no yes yes yes yes yes
no no no no no no no no no no no no yes yes yes yes yes
no no no no no no no no no no no yes yes yes yes yes yes
no no no no no no no no no no yes yes yes yes yes yes yes

Supporting template

See also

External links