Template:Color contrast conformance/doc

{{#ifeq:doc |doc

    | 

{{#ifeq:show |show

         | {{#invoke:Message box|mbox}}
        }}{{#if: |
         |   {{#ifexist:Template:Color contrast conformance
                  | [[Category:{{#switch:Template |Template=Template |Module=Module |User=User |#default=Wikipedia}} documentation pages]]
                  | 
                 }}
        }}
    | 
   }}

{{#invoke:Lua banner|main}}

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
main|code=on}}	no|	Contrast: blue & white, conformance level=  }}{{#ifexpr: {{#invoke:Color contrast|ratio|blue|white }} <= 0.14285 or {{#invoke:Color contrast|ratio|blue|white }} >= 7	AAA	ratio|blue|white }} <= 0.222 or {{#invoke:Color contrast|ratio|blue|white }} >= 4.5	AA	none }} }}
main|code=on}}	no|	Contrast: red & #FFcc00, conformance level=  }}{{#ifexpr: {{#invoke:Color contrast|ratio|red|#FFcc00 }} <= 0.14285 or {{#invoke:Color contrast|ratio|red|#FFcc00 }} >= 7	AAA	ratio|red|#FFcc00 }} <= 0.222 or {{#invoke:Color contrast|ratio|red|#FFcc00 }} >= 4.5	AA	none }} }}
main|code=on}}	no|	Contrast: black & White, conformance level=  }}{{#ifexpr: {{#invoke:Color contrast|ratio|black|White }} <= 0.14285 or {{#invoke:Color contrast|ratio|black|White }} >= 7	AAA	ratio|black|White }} <= 0.222 or {{#invoke:Color contrast|ratio|black|White }} >= 4.5	AA	none }} }}

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

	main}}
	main}}
	main}}
	main}}
	main}}
	main}}
	main}}
	main}}
	main}}
	main}}
	main}}
	main}}
	main}}
	main}}
	main}}
	main}}
	main}}
	main}}

Supporting template

• {{Color contrast ratio}}, gives ratio number — uses {{#invoke:[[Module:{{#if:1|Color contrast}}|{{#if:1|Color contrast}}]]{{#if: ratio | |{{#if:1|ratio}} }}}}

See also

• {{ColorToLum}}, gives luminance value of a color
• Wikipedia:WikiProject Accessibility

External links

• Index of Color Contrast Samples