Changes
Jump to navigation
Jump to search
Template:Color contrast ratio/doc (view source)
Revision as of 23:19, 15 December 2015
, 8 years agono edit summary
{{Documentation subpage}}
<!-- Categories and interwikis go at the bottom of this page. -->
{{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 ==
=== Examples with light background ===
{| class="wikitable"
|-
! 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 }}
| {{tlp|Color contrast ratio|#000000|#FFFFFF}}
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#000000|#FFFFFF}} round3}}
| AAA
|-
| {{Color sample|#000080}} #000080
| {{Color sample|#DDDDDD}} #DDDDDD
| {{Font color|#000080|#DDDDDD| Sample }}
| {{tlp|Color contrast ratio|#000080|#DDDDDD}}
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#000080|#DDDDDD}} round3}}
| AAA
|-
| {{Color sample|#7B0000}} #7B0000
| {{Color sample|#FF9900}} #FF9900
| {{Font color|#7B0000|#FF9900| Sample }}
| {{tlp|Color contrast ratio|#7B0000|#FF9900}}
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#7B0000|#FF9900}} round3}}
| AA
|-
| {{Color sample|#004800}} #004800
| {{Color sample|#AAAAAA}} #AAAAAA
| {{Font color|#004800|#AAAAAA| Sample }}
| {{tlp|Color contrast ratio|#004800|#AAAAAA}}
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#004800|#AAAAAA}} round3}}
| AA
|-
| {{Color sample|red}} red
| {{Color sample|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}}
|-
| {{Color sample|#FF0000}} #FF0000
| {{Color sample|#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 !! [[WCAG 2.0]]<BR>conf.
|-
| {{Color sample|#BADFEE}} #BADFEE
| {{Color sample|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
|-
| {{Color sample|red}} red
| {{Color sample|black}} black
| {{Font color|red|black| Sample }}
| {{tlp|Color contrast ratio|red|black}}
| style="text-align: right;" | {{#expr: {{Color contrast ratio|red|black}} round3}}
| AA
|-
| {{Color sample|#FFFF00}} #FFFF00
| {{Color sample|#00FFFF}} #00FFFF
| {{Font color|#FFFF00|#00FFFF| Sample }}
| {{tlp|Color contrast ratio|#FFFF00|#00FFFF}}
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#FFFF00|#00FFFF}} round3}}
| {{no}}
|}
== WCAG 2.0 ==
As a guide to selecting foreground and background colors for text, the [http://www.w3.org/TR/WCAG20/#visual-audio-contrast Web Content Accessibility Guidelines 2.0 (guideline 1.4)] classifies contrast ratios for ordinary text as follows:
{| class="wikitable"
|+ WCAG 2.0 text contrast ratios
|-
! scope="col" | Font size
! scope="col" | Not Compliant
! scope="col" | Level AA
! scope="col" | 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 [http://www.w3.org/TR/WCAG20/#larger-scaledef WCAG purposes].
== See also ==
* [[Template:Color contrast conformance]]
* [[Wikipedia:WikiProject Accessibility]]
* [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>
<!-- Categories and interwikis go here: -->
{{sandbox other||[[Category:Color conversion templates]]}}
</includeonly>
<!-- Categories and interwikis go at the bottom of this page. -->
{{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 ==
=== Examples with light background ===
{| class="wikitable"
|-
! 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 }}
| {{tlp|Color contrast ratio|#000000|#FFFFFF}}
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#000000|#FFFFFF}} round3}}
| AAA
|-
| {{Color sample|#000080}} #000080
| {{Color sample|#DDDDDD}} #DDDDDD
| {{Font color|#000080|#DDDDDD| Sample }}
| {{tlp|Color contrast ratio|#000080|#DDDDDD}}
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#000080|#DDDDDD}} round3}}
| AAA
|-
| {{Color sample|#7B0000}} #7B0000
| {{Color sample|#FF9900}} #FF9900
| {{Font color|#7B0000|#FF9900| Sample }}
| {{tlp|Color contrast ratio|#7B0000|#FF9900}}
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#7B0000|#FF9900}} round3}}
| AA
|-
| {{Color sample|#004800}} #004800
| {{Color sample|#AAAAAA}} #AAAAAA
| {{Font color|#004800|#AAAAAA| Sample }}
| {{tlp|Color contrast ratio|#004800|#AAAAAA}}
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#004800|#AAAAAA}} round3}}
| AA
|-
| {{Color sample|red}} red
| {{Color sample|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}}
|-
| {{Color sample|#FF0000}} #FF0000
| {{Color sample|#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 !! [[WCAG 2.0]]<BR>conf.
|-
| {{Color sample|#BADFEE}} #BADFEE
| {{Color sample|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
|-
| {{Color sample|red}} red
| {{Color sample|black}} black
| {{Font color|red|black| Sample }}
| {{tlp|Color contrast ratio|red|black}}
| style="text-align: right;" | {{#expr: {{Color contrast ratio|red|black}} round3}}
| AA
|-
| {{Color sample|#FFFF00}} #FFFF00
| {{Color sample|#00FFFF}} #00FFFF
| {{Font color|#FFFF00|#00FFFF| Sample }}
| {{tlp|Color contrast ratio|#FFFF00|#00FFFF}}
| style="text-align: right;" | {{#expr: {{Color contrast ratio|#FFFF00|#00FFFF}} round3}}
| {{no}}
|}
== WCAG 2.0 ==
As a guide to selecting foreground and background colors for text, the [http://www.w3.org/TR/WCAG20/#visual-audio-contrast Web Content Accessibility Guidelines 2.0 (guideline 1.4)] classifies contrast ratios for ordinary text as follows:
{| class="wikitable"
|+ WCAG 2.0 text contrast ratios
|-
! scope="col" | Font size
! scope="col" | Not Compliant
! scope="col" | Level AA
! scope="col" | 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 [http://www.w3.org/TR/WCAG20/#larger-scaledef WCAG purposes].
== See also ==
* [[Template:Color contrast conformance]]
* [[Wikipedia:WikiProject Accessibility]]
* [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>
<!-- Categories and interwikis go here: -->
{{sandbox other||[[Category:Color conversion templates]]}}
</includeonly>
