Difference between revisions of "Template:Color contrast ratio/doc"

From blackwiki
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
 
|-
 
| {{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}}
 
 
| 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|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
 +
| {{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}}
| {{Colorsample|#FF0000}} #FF0000
 
| {{Colorsample|#FF9999}} #FF9999
 
| {{Font color|#FF0000|#FF9999|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
 
| {{tlp|Color contrast ratio|#FF0000|#FF9999}}
 
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#FF0000|#FF9999}} round3}}
 
|
 
|-
 
| {{Colorsample|red}} red
 
| {{Colorsample|white}} white
 
| {{Font color|red|white|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
 
| {{tlp|Color contrast ratio|red|white}}
 
| style="text-align: right;" | {{#expr: {{Color contrast ratio|red|white}} round3}}
 
|
 
 
|}
 
|}
  
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 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