Difference between revisions of "Template:Color contrast ratio"

From blackwiki
Jump to navigation Jump to search
imported>AlanM1
(New template for W3C contrast ratio)
 
imported>AlanM1
Line 1: Line 1:
<includeonly>{{#expr:({{RGBColorToLum|{{{2}}}}} + 0.05) / ({{RGBColorToLum|{{{1}}}}} + 0.05)}}</includeonly><noinclude>Returns the [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G18 W3C contrast ratio] of param 2 (typically a background color) to param 1 (typically a foreground color).</noinclude>
+
<includeonly>{{#expr:({{RGBColorToLum|{{{2}}}}} + 0.05) / ({{RGBColorToLum|{{{1}}}}} + 0.05)}}</includeonly><noinclude>{{Documentation}}</noinclude>

Revision as of 08:51, 1 March 2013

50px Template documentation[view] [edit] [history] [purge]

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}} Expression error: Unexpected < operator. AAA
#000080 #DDDDDD   Sample   {{Color contrast ratio|#000080|#DDDDDD}} Expression error: Unexpected < operator. AAA
#7B0000 #FF9900   Sample   {{Color contrast ratio|#7B0000|#FF9900}} Expression error: Unexpected < operator. AA
#004800 #AAAAAA   Sample   {{Color contrast ratio|#004800|#AAAAAA}} Expression error: Unexpected < operator. AA
red white   Sample   {{Color contrast ratio|red|white}} Expression error: Unexpected < operator. No
#FF0000 #FF9999   Sample   {{Color contrast ratio|#FF0000|#FF9999}} Expression error: Unexpected < operator. 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}} Expression error: Unexpected < operator. AAA
red black   Sample   {{Color contrast ratio|red|black}} Expression error: Unexpected < operator. AA
#FFFF00 #00FFFF   Sample   {{Color contrast ratio|#FFFF00|#00FFFF}} Expression error: Unexpected < operator. 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