Tɛmplet:Color contrast ratio
Yi palo
![]() | This template uses Lua: |
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
[mali mi di yibu sheena n-niŋ]Examples with light background
[mali mi di yibu sheena n-niŋ]Text Color |
Background color |
Sample | Code | Contrast ratio |
WCAG 2.0 conf. |
---|---|---|---|---|---|
#000000 | #FFFFFF | Sample | {{Color contrast ratio|#000000|#FFFFFF}}
|
Maŋ wuhibu daliŋ: pɛrimbu < operator. | AAA |
#000080 | #DDDDDD | Sample | {{Color contrast ratio|#000080|#DDDDDD}}
|
Maŋ wuhibu daliŋ: pɛrimbu < operator. | AAA |
#7B0000 | #FF9900 | Sample | {{Color contrast ratio|#7B0000|#FF9900}}
|
Maŋ wuhibu daliŋ: pɛrimbu < operator. | AA |
#004800 | #AAAAAA | Sample | {{Color contrast ratio|#004800|#AAAAAA}}
|
Maŋ wuhibu daliŋ: pɛrimbu < operator. | AA |
red | white | Sample | {{Color contrast ratio|red|white}}
|
Maŋ wuhibu daliŋ: pɛrimbu < operator. | No |
#FF0000 | #FF9999 | Sample | {{Color contrast ratio|#FF0000|#FF9999}}
|
Maŋ wuhibu daliŋ: pɛrimbu < operator. | No |
Examples with dark background
[mali mi di yibu sheena n-niŋ]Text Color |
Background color |
Sample | Code | Contrast ratio |
WCAG 2.0 conf. |
---|---|---|---|---|---|
#BADFEE | black | Sample | {{Color contrast ratio|#BaDFeE|BlAcK}}
|
Maŋ wuhibu daliŋ: pɛrimbu < operator. | AAA |
red | black | Sample | {{Color contrast ratio|red|black}}
|
Maŋ wuhibu daliŋ: pɛrimbu < operator. | AA |
#FFFF00 | #00FFFF | Sample | {{Color contrast ratio|#FFFF00|#00FFFF}}
|
Maŋ wuhibu daliŋ: pɛrimbu < operator. | No |
WCAG 2.0
[mali mi di yibu sheena n-niŋ]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:
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
[mali mi di yibu sheena n-niŋ]- 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
@