Difference between revisions of "Template:Color contrast ratio/doc"
Jump to navigation
Jump to search
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) |
imported>RexxS (add section on WCAG per request at WT:WikiProject Accessibility #Template:Color contrast ratio) |
||
| Line 81: | Line 81: | ||
| {{no}} | | {{no}} | ||
|} | |} | ||
| + | |||
| + | == WCAG 2.0 == | ||
| + | As a guide to selecting foreground and background colors for text, the [http://www.w3.org/TR/WCAG20/#visual-audio-contrast Web Content Accessibility Guidelines 2.0 (guideline 1.4)] classifies contrast ratios for ordinary text as follows: | ||
| + | |||
| + | {| class="wikitable" | ||
| + | |+ WCAG 2.0 text contrast ratios | ||
| + | |- | ||
| + | ! scope="col" | Font size | ||
| + | ! scope="col" | Not Compliant | ||
| + | ! scope="col" | Level AA | ||
| + | ! scope="col" | 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 [http://www.w3.org/TR/WCAG20/#larger-scaledef WCAG purposes]. | ||
== See also == | == See also == | ||
Revision as of 13:22, 19 July 2014
| This is a documentation subpage for Template:Color contrast ratio. It contains usage information, categories and other content that is not part of the original template page. |
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).
Contents
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 |
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:
| 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.