Color Contrast Checker

Tool

Nationwide is on your side

At Nationwide, we exist to protect people, businesses and futures with extraordinary care. Knowing that customers trust our "On Your Side" promise during the worst and best moments of life is an honor and a privilege.

Text Color

Text (foreground) color must be valid

Background Color

Background color must be valid

Contrast

5.53:1

Normal text

Poor

AAA

Large text

Good

AAA

Recommendations

Further enhance your text and background colors to meet WCAG 2.1 AAA

Color blindness

Color blindness (color vision deficiency, or CVD) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. Worldwide, there are approximately 300 million people with color blindness, almost the same number of people as the entire population of the USA.

Learn more about color blindness

Protanopia

1.3% of men, 0.02% of women

Protanomaly

1.3% of men, 0.02% of women

Deuteranopia

1.2% of men, 0.01% of women

Deuteranomaly

5% of men, 0.35% of women

Tritanopia

0.001% of men, 0.03% of women

Tritanomaly

0.0001% of the population

Achromatopsia

0.003% of the population

Achromatomaly

0.001% of the population

Explanation

According to WCAG 2.1 Guideline 1.4 , users must be able to see and hear content including separating foreground from background.

WCAG 2.1 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

1.4.3 Contrast (Minimum) - According to WCAG 2.1

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

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 contrast requirement. You can learn more about how to make your documents, emails, videos, websites, and mobile apps accessible by visiting our document library or request training .

More information

Understanding 1.4.3
How to meet 1.4.3