DONT ADD ANYTHING HERE!

  1. In WCAG 2, contrast is a measure of the difference in perceived "luminance" or brightness between two colors (the phrase "color contrast" is never used in WCAG)
  2. This brightness difference is expressed as a ratio ranging from 1:1 (e.g. white on white) to 21:1 (e.g., black on a white)
  3. If text and background colors are swapped, the contrast ratio remains the same
Color Contrasts
Color Color code Contrast Ratio
White #FFFFFF 1 1
Yellow #FFFF00 1:1.07 1.07
Cyan #00FFFF 1:1.25 1.25
Green (lime) #00FF00 1: 1.4 1.4
Magenta #FF00FF 1:3.13 3.13
Red #FF0000 1:4 4
Blue #0000FF 1:8.6 8.6
Black #000000 1:21 21

WCAG Guidelines

  1. minimum (AA level)
    1. The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
    2. Exception: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1
    3. See WCAG: contrast-minimum
  2. contrast (enhanced) (AAA level)
    1. The visual presentation of text and images of text has a contrast ratio of at least 7:1
    2. Exception: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1
    3. See WCAG contrast-enhanced

Examples

Color Contrast Examples
color example
White on Green 1.4
Blue on Black 2.44
Black on Blue 2.44
White on Red 4
White on Gray 4.54
Black on Red 5.25
White on Blue 8.6
Yellow on Black 19.55
White on Black 21

Mnemonic

4.5 & 7

References

Contrast and Color Accessibility Understanding WCAG 2 Contrast and Color Requirements
WCAG: contrast-enhanced
WCAG: contrast-minimum
WebAim Contrast Checker