Fyrimynd:Color contrast ratio/doc

Frá Wikipedia, hin frælsa alfrøðin
Jump to navigation Jump to search

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[rætta wikitekst]

Examples with light background[rætta wikitekst]

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

Examples with dark background[rætta wikitekst]

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 Nei

WCAG 2.0[rætta wikitekst]

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[rætta wikitekst]