Difference between revisions of "Template:Color contrast ratio/doc"
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 | + | | 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 | + | | 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 | + | | 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 | + | | 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 | + | | 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 | + | | 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 | + | | 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 | + | | 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 | + | | style="text-align: right;" | {{#expr: {{Color contrast ratio|red|white}} round3}} |
| + | | | ||
|} | |} | ||
Revision as of 12:48, 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
| 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 |