Template:Color contrast ratio/doc

From blackwiki
< Template:Color contrast ratio
Revision as of 13:41, 29 March 2013 by imported>He7d3r (+section for light-on-dark examples; +Index of Color Contrast Samples; +Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text)
Jump to navigation Jump to search

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}} 14.878 14.878 AAA
red black   Sample   {{Color contrast ratio|red|black}} 5.252 5.252 AA
#FFFF00 #00FFFF   Sample   {{Color contrast ratio|#FFFF00|#00FFFF}} 1.168 1.168 No

See also