Template:Color contrast ratio

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

This template returns the color contrast ratio between the two colors provided. It accepts two parameters, which can be a standard RGB hex color code (#RRGGBB) or a standard HTML color or CSS "orange" (= #FFA500). Color names and hex letters are case-insensitive (i.e. they may be upper- or lower-case).

Usage

Examples with light background

Text Color	Background color	Sample	Code	Contrast ratio	WCAG 2.0 conf.
#000000	#FFFFFF	Sample	{{Color contrast ratio|#000000|#FFFFFF}}	21	AAA
#000080	#DDDDDD	Sample	{{Color contrast ratio|#000080|#DDDDDD}}	11.787	AAA
#7B0000	#FF9900	Sample	{{Color contrast ratio|#7B0000|#FF9900}}	5.324	AA
#004800	#AAAAAA	Sample	{{Color contrast ratio|#004800|#AAAAAA}}	4.691	AA
red	white	Sample	{{Color contrast ratio|red|white}}	3.998	No
#FF0000	#FF9999	Sample	{{Color contrast ratio|#FF0000|#FF9999}}	1.955	No

Examples with dark background

Text Color	Background color	Sample	Code	Contrast ratio	Reciprocal	WCAG 2.0 conf.
#BADFEE	black	Sample	{{Color contrast ratio|#BaDFeE|BlAcK}}	0.067	14.878	AAA
red	black	Sample	{{Color contrast ratio|red|black}}	0.19	5.252	AA
#FFFF00	#00FFFF	Sample	{{Color contrast ratio|#FFFF00|#00FFFF}}	0.856	1.168	No

See also

• Wikipedia:WikiProject Accessibility
• Colour Contrast Check
• G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
• Index of Color Contrast Samples