Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Contrast

Contrast is the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable.

...

An example of this is the color of text on top of a background color.

Contrast Ratio

Level

Text Color

Background Color

Example

1

9.27

AAA

#172842

#ffc401

example

2

5.34

AA

#0847a6

#ffc401

example

3

3.

...

68

AALG

#6454c0

#ffc401

example

4

1.65

FAIL

#97a0af

#ffc401

example

As you can see above in the, example column of the above table, rows three and four are more difficult to read than rows one and two.

According to the W3C WCAG 2.0:

Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Rating

Success Criterion

Notes

AAA

Pass, (7+ contrast ratio)

AA

Pass, (4.5+ contrast ratio)

AALG

Pass, Large Text Only, (3+ contrast ratio)

with at least 18 point or 14 point bold or font size

More information can be found here https:/wiki/www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.htmlspaces/WCAG/pages/163513201.