Skabelon:Color contrast ratio/doc

Fra Wikipedia, den frie encyklopædi
Spring til navigation Spring til søgning

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[redigér wikikode]

Examples with light background[redigér wikikode]

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 Nej
#FF0000 #FF9999   Sample   {{Color contrast ratio|#FF0000|#FF9999}} 1.955 Nej

Examples with dark background[redigér wikikode]

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 Nej

WCAG 2.0[redigér wikikode]

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.

Se også[redigér wikikode]