Template:Color contrast conformance

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

• {{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

• Index of Color Contrast Samples