Template:Color contrast ratio/doc

{{#ifeq:doc |doc

    | 

{{#ifeq:show |show

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

{{#invoke:Lua banner|main}} 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	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1|   Sample   }}|{{safesubst:#if:1|   Sample   }}]]	[[|{{safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1| #FFFFFF }} |{{safesubst:#if:1| #FFFFFF }}]]	[[ {{safesubst:#if:1| }} |{{safesubst:#if:1| #FFFFFF }}]] }}	#FFFFFF }} }} }}	main|nowrap=yes}}	{{#expr: {{#invoke:Color contrast|ratio|#000000|#FFFFFF}} round3}}	AAA
#000080	#DDDDDD	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1|   Sample   }}|{{safesubst:#if:1|   Sample   }}]]	[[|{{safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1| #DDDDDD }} |{{safesubst:#if:1| #DDDDDD }}]]	[[ {{safesubst:#if:1| }} |{{safesubst:#if:1| #DDDDDD }}]] }}	#DDDDDD }} }} }}	main|nowrap=yes}}	{{#expr: {{#invoke:Color contrast|ratio|#000080|#DDDDDD}} round3}}	AAA
#7B0000	#FF9900	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1|   Sample   }}|{{safesubst:#if:1|   Sample   }}]]	[[|{{safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1| #FF9900 }} |{{safesubst:#if:1| #FF9900 }}]]	[[ {{safesubst:#if:1| }} |{{safesubst:#if:1| #FF9900 }}]] }}	#FF9900 }} }} }}	main|nowrap=yes}}	{{#expr: {{#invoke:Color contrast|ratio|#7B0000|#FF9900}} round3}}	AA
#004800	#AAAAAA	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1|   Sample   }}|{{safesubst:#if:1|   Sample   }}]]	[[|{{safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1| #AAAAAA }} |{{safesubst:#if:1| #AAAAAA }}]]	[[ {{safesubst:#if:1| }} |{{safesubst:#if:1| #AAAAAA }}]] }}	#AAAAAA }} }} }}	main|nowrap=yes}}	{{#expr: {{#invoke:Color contrast|ratio|#004800|#AAAAAA}} round3}}	AA
red	white	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1|   Sample   }}|{{safesubst:#if:1|   Sample   }}]]	[[|{{safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1| white }} |{{safesubst:#if:1| white }}]]	[[ {{safesubst:#if:1| }} |{{safesubst:#if:1| white }}]] }}	white }} }} }}	main|nowrap=yes}}	{{#expr: {{#invoke:Color contrast|ratio|red|white}} round3}}	No
#FF0000	#FF9999	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1|   Sample   }}|{{safesubst:#if:1|   Sample   }}]]	[[|{{safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1| #FF9999 }} |{{safesubst:#if:1| #FF9999 }}]]	[[ {{safesubst:#if:1| }} |{{safesubst:#if:1| #FF9999 }}]] }}	#FF9999 }} }} }}	main|nowrap=yes}}	{{#expr: {{#invoke:Color contrast|ratio|#FF0000|#FF9999}} round3}}	No

Examples with dark background

Text Color	Background color	Sample	Code	Contrast ratio	WCAG 2.0 conf.
#BADFEE	black	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1|   Sample   }}|{{safesubst:#if:1|   Sample   }}]]	[[|{{safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1| black }} |{{safesubst:#if:1| black }}]]	[[ {{safesubst:#if:1| }} |{{safesubst:#if:1| black }}]] }}	black }} }} }}	main|nowrap=yes}}	{{#expr: {{#invoke:Color contrast|ratio|#BaDFeE|BlAcK}} round3}}	AAA
red	black	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1|   Sample   }}|{{safesubst:#if:1|   Sample   }}]]	[[|{{safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1| black }} |{{safesubst:#if:1| black }}]]	[[ {{safesubst:#if:1| }} |{{safesubst:#if:1| black }}]] }}	black }} }} }}	main|nowrap=yes}}	{{#expr: {{#invoke:Color contrast|ratio|red|black}} round3}}	AA
#FFFF00	#00FFFF	{{ safesubst:#if:   Sample	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1|   Sample   }}|{{safesubst:#if:1|   Sample   }}]]	[[|{{safesubst:#if:1|   Sample   }}]] }}	Sample   }} }}	{{ safesubst:#if:	yes	[[ {{safesubst:#if:1| #00FFFF }} |{{safesubst:#if:1| #00FFFF }}]]	[[ {{safesubst:#if:1| }} |{{safesubst:#if:1| #00FFFF }}]] }}	#00FFFF }} }} }}	main|nowrap=yes}}	{{#expr: {{#invoke:Color contrast|ratio|#FFFF00|#00FFFF}} round3}}	No

WCAG 2.0

As a guide to selecting foreground and background colors for text, the Web Content Accessibility Guidelines 2.0 (guideline 1.4) classifies contrast ratios for ordinary text as follows:

WCAG 2.0 text contrast ratios

Font size	Not Compliant	Level AA	Level AAA
Normal	< 4.5	4.5 to 7.0	> 7.0
Large (18 pt or 14 pt bold)	< 3.0	3.0 to 4.5	> 4.5

Normal wiki-text is rendered by common browsers at roughly 9.5 to 10.5 pt (12.5 to 14 px), depending on skin. Text would need to be about 180% or 140% bold to qualify as "Large" for WCAG purposes.

See also

• Template:Color contrast conformance
• 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