Contrasts

Related Guideline

WCAG 2.2 Success Criterion 1.4.3 Contrast (Minimum)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.

Exceptions

The only exceptions to that are as follows:
Large Text: large scale text (at least 18pt or 14pt and bold) must have a contrast ratio of at least 3:1.

Incidental: text that's part of an inactive user interface component, isn't visible to anyone, or that is purely decorative, have no contrast requirement.

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

Good Examples

This box has a background of #004b80 and text color white. Contrast Ratio: 9.05:1

This box has a background of #fbaa19 and text color black. Contrast Ratio: 10.86:1

This box has a background of #7eb6e3 and text color black. Contrast Ratio: 9.68:1

This box has a background of #787878 and text color black. Contrast Ratio: 4.75:1

Bad Examples

Please Note: The following examples fall below minimum color contrast and in some cases may be difficult to read. This is intentional.

This box has a background of #fbaa19 and text color white. Contrast Ratio: 1.93:1

This box has a background of #7eb6e3 and text color white. Contrast Ratio: 2.16:1

This box has a background of #787878 and text color white. Contrast Ratio: 4.41:1

More Resources