Difference between revisions of "Template:Color contrast ratio/doc"
Jump to navigation
Jump to search
imported>RexxS (add section on WCAG per request at WT:WikiProject Accessibility #Template:Color contrast ratio) |
imported>DePiep |
||
| (5 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
{{Documentation subpage}} | {{Documentation subpage}} | ||
<!-- Categories and interwikis go at the bottom of this page. --> | <!-- Categories and interwikis go at the bottom of this 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 (<code>#RRGGBB</code>) or a standard [[Web colors#HTML color names|HTML color]] or CSS "orange" (= #FFA500). Color names and hex letters are case-insensitive (i.e. they may be upper- or lower-case). | + | {{lua|Module:Color contrast}} |
| + | 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 (<code>#RRGGBB</code>) or a standard [[Web colors#HTML color names|HTML color]] or CSS "orange" (= <code>#FFA500</code>). Color names and hex letters are case-insensitive (i.e. they may be upper- or lower-case). | ||
== Usage == | == Usage == | ||
| Line 9: | Line 10: | ||
! Text<BR>Color !! Background<BR>color !! Sample !! Code !! Contrast<BR>ratio !! [[WCAG 2.0]]<BR>conf. | ! Text<BR>Color !! Background<BR>color !! Sample !! Code !! Contrast<BR>ratio !! [[WCAG 2.0]]<BR>conf. | ||
|- | |- | ||
| − | | {{ | + | | {{Color sample|#000000}} #000000 |
| − | | {{ | + | | {{Color sample|#FFFFFF}} #FFFFFF |
| {{Font color|#000000|#FFFFFF| Sample }} | | {{Font color|#000000|#FFFFFF| Sample }} | ||
| {{tlp|Color contrast ratio|#000000|#FFFFFF}} | | {{tlp|Color contrast ratio|#000000|#FFFFFF}} | ||
| Line 16: | Line 17: | ||
| AAA | | AAA | ||
|- | |- | ||
| − | | {{ | + | | {{Color sample|#000080}} #000080 |
| − | | {{ | + | | {{Color sample|#DDDDDD}} #DDDDDD |
| {{Font color|#000080|#DDDDDD| Sample }} | | {{Font color|#000080|#DDDDDD| Sample }} | ||
| {{tlp|Color contrast ratio|#000080|#DDDDDD}} | | {{tlp|Color contrast ratio|#000080|#DDDDDD}} | ||
| Line 23: | Line 24: | ||
| AAA | | AAA | ||
|- | |- | ||
| − | | {{ | + | | {{Color sample|#7B0000}} #7B0000 |
| − | | {{ | + | | {{Color sample|#FF9900}} #FF9900 |
| {{Font color|#7B0000|#FF9900| Sample }} | | {{Font color|#7B0000|#FF9900| Sample }} | ||
| {{tlp|Color contrast ratio|#7B0000|#FF9900}} | | {{tlp|Color contrast ratio|#7B0000|#FF9900}} | ||
| Line 30: | Line 31: | ||
| AA | | AA | ||
|- | |- | ||
| − | | {{ | + | | {{Color sample|#004800}} #004800 |
| − | | {{ | + | | {{Color sample|#AAAAAA}} #AAAAAA |
| {{Font color|#004800|#AAAAAA| Sample }} | | {{Font color|#004800|#AAAAAA| Sample }} | ||
| {{tlp|Color contrast ratio|#004800|#AAAAAA}} | | {{tlp|Color contrast ratio|#004800|#AAAAAA}} | ||
| Line 37: | Line 38: | ||
| AA | | AA | ||
|- | |- | ||
| − | | {{ | + | | {{Color sample|red}} red |
| − | | {{ | + | | {{Color sample|white}} white |
| {{Font color|red|white| Sample }} | | {{Font color|red|white| Sample }} | ||
| {{tlp|Color contrast ratio|red|white}} | | {{tlp|Color contrast ratio|red|white}} | ||
| Line 44: | Line 45: | ||
| {{no}} | | {{no}} | ||
|- | |- | ||
| − | | {{ | + | | {{Color sample|#FF0000}} #FF0000 |
| − | | {{ | + | | {{Color sample|#FF9999}} #FF9999 |
| {{Font color|#FF0000|#FF9999| Sample }} | | {{Font color|#FF0000|#FF9999| Sample }} | ||
| {{tlp|Color contrast ratio|#FF0000|#FF9999}} | | {{tlp|Color contrast ratio|#FF0000|#FF9999}} | ||
| Line 55: | Line 56: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
| − | ! Text<BR>Color !! Background<BR>color !! Sample !! Code !! Contrast<BR>ratio | + | ! Text<BR>Color !! Background<BR>color !! Sample !! Code !! Contrast<BR>ratio !! [[WCAG 2.0]]<BR>conf. |
|- | |- | ||
| − | | {{ | + | | {{Color sample|#BADFEE}} #BADFEE |
| − | | {{ | + | | {{Color sample|black}} black |
| {{Font color|#BADFEE|black| Sample }} | | {{Font color|#BADFEE|black| Sample }} | ||
| {{tlp|Color contrast ratio|#BaDFeE|BlAcK}} | | {{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|#BaDFeE|BlAcK}} round3}} | ||
| − | |||
| AAA | | AAA | ||
|- | |- | ||
| − | | {{ | + | | {{Color sample|red}} red |
| − | | {{ | + | | {{Color sample|black}} black |
| {{Font color|red|black| Sample }} | | {{Font color|red|black| Sample }} | ||
| {{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}} | ||
| − | |||
| AA | | AA | ||
|- | |- | ||
| − | | {{ | + | | {{Color sample|#FFFF00}} #FFFF00 |
| − | | {{ | + | | {{Color sample|#00FFFF}} #00FFFF |
| {{Font color|#FFFF00|#00FFFF| Sample }} | | {{Font color|#FFFF00|#00FFFF| Sample }} | ||
| {{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}} | ||
| − | |||
| {{no}} | | {{no}} | ||
|} | |} | ||
| Line 106: | Line 104: | ||
== See also == | == See also == | ||
| + | * [[Template:Color contrast conformance]] | ||
* [[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] | ||
| Line 112: | Line 111: | ||
<includeonly> | <includeonly> | ||
<!-- Categories and interwikis go here: --> | <!-- Categories and interwikis go here: --> | ||
| − | [[Category:Color conversion templates]] | + | {{sandbox other||[[Category:Color conversion templates]]}} |
</includeonly> | </includeonly> | ||
Latest revision as of 22:19, 15 December 2015
| 40px | 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. |
| 30px | This template uses Lua: |
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 |
WCAG 2.0 conf. |
|---|---|---|---|---|---|
| #BADFEE | black | Sample | {{Color contrast ratio|#BaDFeE|BlAcK}} | 14.878 | AAA |
| red | black | Sample | {{Color contrast ratio|red|black}} | 5.252 | AA |
| #FFFF00 | #00FFFF | Sample | {{Color contrast ratio|#FFFF00|#00FFFF}} | 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.