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>DePiep
 
(8 intermediate revisions by 5 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 ==
=== Examples ===
+
=== Examples with light background ===
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
 
! 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.
 
|-
 
|-
| {{Colorsample|#000000}} #000000
+
| {{Color sample|#000000}} #000000
| {{Colorsample|#FFFFFF}} #FFFFFF
+
| {{Color sample|#FFFFFF}} #FFFFFF
 
| {{Font color|#000000|#FFFFFF|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
 
| {{Font color|#000000|#FFFFFF|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
 
| {{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
 
|-
 
|-
| {{Colorsample|#000080}} #000080
+
| {{Color sample|#000080}} #000080
| {{Colorsample|#DDDDDD}} #DDDDDD
+
| {{Color sample|#DDDDDD}} #DDDDDD
 
| {{Font color|#000080|#DDDDDD|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
 
| {{Font color|#000080|#DDDDDD|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
 
| {{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
 
|-
 
|-
| {{Colorsample|#BADFEE}} #BADFEE
+
| {{Color sample|#7B0000}} #7B0000
| {{Colorsample|black}} black
+
| {{Color sample|#FF9900}} #FF9900
| {{Font color|#BADFEE|black|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
 
| {{tlp|Color contrast ratio|#BaDFeE|BlAcK}}
 
| align=right | {{#expr: {{Color contrast ratio|#BaDFeE|BlAcK}} round3}}
 
| AAA
 
|-
 
| {{Colorsample|#7B0000}} #7B0000
 
| {{Colorsample|#FF9900}} #FF9900
 
 
| {{Font color|#7B0000|#FF9900|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
 
| {{Font color|#7B0000|#FF9900|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
 
| {{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
 
|-
 
|-
| {{Colorsample|#004800}} #004800
+
| {{Color sample|#004800}} #004800
| {{Colorsample|#AAAAAA}} #AAAAAA
+
| {{Color sample|#AAAAAA}} #AAAAAA
 
| {{Font color|#004800|#AAAAAA|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
 
| {{Font color|#004800|#AAAAAA|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
 
| {{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
 
|-
 
|-
| {{Colorsample|red}} red
+
| {{Color sample|red}} red
| {{Colorsample|black}} black
+
| {{Color sample|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}}
 +
| {{no}}
 +
|-
 +
| {{Color sample|#FF0000}} #FF0000
 +
| {{Color sample|#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}}
 +
| {{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|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
 +
| {{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|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
 
| {{Font color|red|black|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
 
| {{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
 
|-
 
|-
| {{Colorsample|#FFFF00}} #FFFF00
+
| {{Color sample|#FFFF00}} #FFFF00
| {{Colorsample|#00FFFF}} #00FFFF
+
| {{Color sample|#00FFFF}} #00FFFF
 
| {{Font color|#FFFF00|#00FFFF|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
 
| {{Font color|#FFFF00|#00FFFF|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
 
| {{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}}
 +
| {{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
 
|-
 
|-
| {{Colorsample|#FF0000}} #FF0000
+
| Normal
| {{Colorsample|#FF9999}} #FF9999
+
| < 4.5
| {{Font color|#FF0000|#FF9999|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
+
| 4.5 to 7.0
| {{tlp|Color contrast ratio|#FF0000|#FF9999}}
+
| > 7.0
| align=right | {{#expr: {{Color contrast ratio|#FF0000|#FF9999}} round3}}
 
 
|-
 
|-
| {{Colorsample|red}} red
+
| Large (18&nbsp;pt or 14&nbsp;pt bold)
| {{Colorsample|white}} white
+
| < 3.0
| {{Font color|red|white|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
+
| 3.0 to 4.5
| {{tlp|Color contrast ratio|red|white}}
+
| > 4.5
| align=right | {{#expr: {{Color contrast ratio|red|white}} round3}}
 
 
|}
 
|}
 +
Normal wiki-text is rendered by common browsers at roughly 9.5 to 10.5&nbsp;pt (12.5 to 14&nbsp;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 ==
 
== 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]
 +
* [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]]
+
{{sandbox other||[[Category:Color conversion templates]]}}
 
</includeonly>
 
</includeonly>

Latest revision as of 22:19, 15 December 2015

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
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:

WCAG 2.0 text contrast ratios
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.

See also