Difference between revisions of "Template:Color contrast ratio/doc"
Jump to navigation
Jump to search
imported>He7d3r m (align is invalid in HTML5 (http://validator.w3.org/check?uri=http%3A%2F%2Fen.wikipedia.org%2Fw%2Findex.php%3Foldid%3D544285294)) |
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) |
||
| Line 4: | Line 4: | ||
== Usage == | == Usage == | ||
| − | === Examples === | + | === Examples with light background === |
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
| Line 21: | Line 21: | ||
| {{tlp|Color contrast ratio|#000080|#DDDDDD}} | | {{tlp|Color contrast ratio|#000080|#DDDDDD}} | ||
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#000080|#DDDDDD}} round3}} | | style="text-align: right;" | {{#expr: {{Color contrast ratio|#000080|#DDDDDD}} round3}} | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| AAA | | AAA | ||
|- | |- | ||
| Line 43: | Line 36: | ||
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#004800|#AAAAAA}} round3}} | | style="text-align: right;" | {{#expr: {{Color contrast ratio|#004800|#AAAAAA}} round3}} | ||
| AA | | AA | ||
| + | |- | ||
| + | | {{Colorsample|red}} red | ||
| + | | {{Colorsample|white}} white | ||
| + | | {{Font color|red|white| Sample }} | ||
| + | | {{tlp|Color contrast ratio|red|white}} | ||
| + | | style="text-align: right;" | {{#expr: {{Color contrast ratio|red|white}} round3}} | ||
| + | | {{no}} | ||
| + | |- | ||
| + | | {{Colorsample|#FF0000}} #FF0000 | ||
| + | | {{Colorsample|#FF9999}} #FF9999 | ||
| + | | {{Font color|#FF0000|#FF9999| Sample }} | ||
| + | | {{tlp|Color contrast ratio|#FF0000|#FF9999}} | ||
| + | | style="text-align: right;" | {{#expr: {{Color contrast ratio|#FF0000|#FF9999}} round3}} | ||
| + | | {{no}} | ||
| + | |} | ||
| + | |||
| + | === Examples with dark background === | ||
| + | {| class="wikitable" | ||
| + | |- | ||
| + | ! Text<BR>Color !! Background<BR>color !! Sample !! Code !! Contrast<BR>ratio !! Reciprocal !! [[WCAG 2.0]]<BR>conf. | ||
| + | |- | ||
| + | | {{Colorsample|#BADFEE}} #BADFEE | ||
| + | | {{Colorsample|black}} black | ||
| + | | {{Font color|#BADFEE|black| Sample }} | ||
| + | | {{tlp|Color contrast ratio|#BaDFeE|BlAcK}} | ||
| + | | style="text-align: right;" | {{#expr: {{Color contrast ratio|#BaDFeE|BlAcK}} round3}} | ||
| + | | style="text-align: right;" | {{#expr: {{Color contrast ratio|BlAcK|#BaDFeE}} round3}} | ||
| + | | AAA | ||
|- | |- | ||
| {{Colorsample|red}} red | | {{Colorsample|red}} red | ||
| Line 49: | Line 70: | ||
| {{tlp|Color contrast ratio|red|black}} | | {{tlp|Color contrast ratio|red|black}} | ||
| style="text-align: right;" | {{#expr: {{Color contrast ratio|red|black}} round3}} | | style="text-align: right;" | {{#expr: {{Color contrast ratio|red|black}} round3}} | ||
| + | | style="text-align: right;" | {{#expr: {{Color contrast ratio|black|red}} round3}} | ||
| AA | | AA | ||
|- | |- | ||
| Line 56: | Line 78: | ||
| {{tlp|Color contrast ratio|#FFFF00|#00FFFF}} | | {{tlp|Color contrast ratio|#FFFF00|#00FFFF}} | ||
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#FFFF00|#00FFFF}} round3}} | | style="text-align: right;" | {{#expr: {{Color contrast ratio|#FFFF00|#00FFFF}} round3}} | ||
| − | + | | style="text-align: right;" | {{#expr: {{Color contrast ratio|#00FFFF|#FFFF00}} round3}} | |
| − | + | | {{no}} | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | | style="text-align: right;" | {{#expr: {{Color contrast ratio|# | ||
| − | |||
| − | |||
| − | |||
| − | | {{ | ||
| − | |||
| − | |||
| − | |||
| − | |||
|} | |} | ||
| Line 76: | Line 85: | ||
* [[Wikipedia:WikiProject Accessibility]] | * [[Wikipedia:WikiProject Accessibility]] | ||
* [http://snook.ca/technical/colour_contrast/colour.html Colour Contrast Check] | * [http://snook.ca/technical/colour_contrast/colour.html Colour Contrast Check] | ||
| + | * [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G18 G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text] | ||
| + | * [http://trace.wisc.edu/contrast-ratio-examples/ Index of Color Contrast Samples] | ||
<includeonly> | <includeonly> | ||
<!-- Categories and interwikis go here: --> | <!-- Categories and interwikis go here: --> | ||
[[Category:Color conversion templates]] | [[Category:Color conversion templates]] | ||
</includeonly> | </includeonly> | ||
Revision as of 13:41, 29 March 2013
| 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).
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 |