Template:Color contrast ratio
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}} | 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
The above documentation is transcluded from Template:Color contrast ratio/doc. (edit | history) Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages. Please add categories to the /doc subpage. Subpages of this template. |