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

From blackwiki
Jump to navigation Jump to search
imported>AlanM1
(→‎Examples: Use round instead of string funcs)
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))
Line 13: Line 13:
 
| {{Font color|#000000|#FFFFFF|  Sample  }}
 
| {{Font color|#000000|#FFFFFF|  Sample  }}
 
| {{tlp|Color contrast ratio|#000000|#FFFFFF}}
 
| {{tlp|Color contrast ratio|#000000|#FFFFFF}}
| align=right | {{#expr: {{Color contrast ratio|#000000|#FFFFFF}} round3}}
+
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#000000|#FFFFFF}} round3}}
 
| AAA
 
| AAA
 
|-
 
|-
Line 20: Line 20:
 
| {{Font color|#000080|#DDDDDD|  Sample  }}
 
| {{Font color|#000080|#DDDDDD|  Sample  }}
 
| {{tlp|Color contrast ratio|#000080|#DDDDDD}}
 
| {{tlp|Color contrast ratio|#000080|#DDDDDD}}
| align=right | {{#expr: {{Color contrast ratio|#000080|#DDDDDD}} round3}}
+
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#000080|#DDDDDD}} round3}}
 
| AAA
 
| AAA
 
|-
 
|-
Line 27: Line 27:
 
| {{Font color|#BADFEE|black|  Sample  }}
 
| {{Font color|#BADFEE|black|  Sample  }}
 
| {{tlp|Color contrast ratio|#BaDFeE|BlAcK}}
 
| {{tlp|Color contrast ratio|#BaDFeE|BlAcK}}
| align=right | {{#expr: {{Color contrast ratio|#BaDFeE|BlAcK}} round3}}
+
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#BaDFeE|BlAcK}} round3}}
 
| AAA
 
| AAA
 
|-
 
|-
Line 34: Line 34:
 
| {{Font color|#7B0000|#FF9900|  Sample  }}
 
| {{Font color|#7B0000|#FF9900|  Sample  }}
 
| {{tlp|Color contrast ratio|#7B0000|#FF9900}}
 
| {{tlp|Color contrast ratio|#7B0000|#FF9900}}
| align=right | {{#expr: {{Color contrast ratio|#7B0000|#FF9900}} round3}}
+
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#7B0000|#FF9900}} round3}}
 
| AA
 
| AA
 
|-
 
|-
Line 41: Line 41:
 
| {{Font color|#004800|#AAAAAA|  Sample  }}
 
| {{Font color|#004800|#AAAAAA|  Sample  }}
 
| {{tlp|Color contrast ratio|#004800|#AAAAAA}}
 
| {{tlp|Color contrast ratio|#004800|#AAAAAA}}
| align=right | {{#expr: {{Color contrast ratio|#004800|#AAAAAA}} round3}}
+
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#004800|#AAAAAA}} round3}}
 
| AA
 
| AA
 
|-
 
|-
Line 48: Line 48:
 
| {{Font color|red|black|  Sample  }}
 
| {{Font color|red|black|  Sample  }}
 
| {{tlp|Color contrast ratio|red|black}}
 
| {{tlp|Color contrast ratio|red|black}}
| align=right | {{#expr: {{Color contrast ratio|red|black}} round3}}
+
| style="text-align: right;" | {{#expr: {{Color contrast ratio|red|black}} round3}}
 
| AA
 
| AA
 
|-
 
|-
Line 55: Line 55:
 
| {{Font color|#FFFF00|#00FFFF|  Sample  }}
 
| {{Font color|#FFFF00|#00FFFF|  Sample  }}
 
| {{tlp|Color contrast ratio|#FFFF00|#00FFFF}}
 
| {{tlp|Color contrast ratio|#FFFF00|#00FFFF}}
| align=right | {{#expr: {{Color contrast ratio|#FFFF00|#00FFFF}} round3}}
+
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#FFFF00|#00FFFF}} round3}}
 +
|
 
|-
 
|-
 
| {{Colorsample|#FF0000}} #FF0000
 
| {{Colorsample|#FF0000}} #FF0000
Line 61: Line 62:
 
| {{Font color|#FF0000|#FF9999|  Sample  }}
 
| {{Font color|#FF0000|#FF9999|  Sample  }}
 
| {{tlp|Color contrast ratio|#FF0000|#FF9999}}
 
| {{tlp|Color contrast ratio|#FF0000|#FF9999}}
| align=right | {{#expr: {{Color contrast ratio|#FF0000|#FF9999}} round3}}
+
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#FF0000|#FF9999}} round3}}
 +
|
 
|-
 
|-
 
| {{Colorsample|red}} red
 
| {{Colorsample|red}} red
Line 67: Line 69:
 
| {{Font color|red|white|  Sample  }}
 
| {{Font color|red|white|  Sample  }}
 
| {{tlp|Color contrast ratio|red|white}}
 
| {{tlp|Color contrast ratio|red|white}}
| align=right | {{#expr: {{Color contrast ratio|red|white}} round3}}
+
| style="text-align: right;" | {{#expr: {{Color contrast ratio|red|white}} round3}}
 +
|
 
|}
 
|}
  

Revision as of 12:48, 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

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
#BADFEE black   Sample   {{Color contrast ratio|#BaDFeE|BlAcK}} 14.878 AAA
#7B0000 #FF9900   Sample   {{Color contrast ratio|#7B0000|#FF9900}} 5.324 AA
#004800 #AAAAAA   Sample   {{Color contrast ratio|#004800|#AAAAAA}} 4.691 AA
red black   Sample   {{Color contrast ratio|red|black}} 5.252 AA
#FFFF00 #00FFFF   Sample   {{Color contrast ratio|#FFFF00|#00FFFF}} 1.168
#FF0000 #FF9999   Sample   {{Color contrast ratio|#FF0000|#FF9999}} 1.955
red white   Sample   {{Color contrast ratio|red|white}} 3.998

See also