Contrast, accessibility and brand colors

Every year WebAIM scans the home pages of the web’s top one million sites for accessibility errors. The same problem has topped the list for years: low-contrast text.

Accessibility is often discussed as extra work for a small group of users. But contrast affects everyone: people reading their phone in sunlight, people whose eyes tire more easily with age, people working on a cheap monitor. Even when low contrast doesn’t make text unreadable, it makes reading slower and more tiring.

A slow, seven-year improvement reversed in 2026: the share rose from 79.1% to 83.9%. The same report found at least one WCAG failure on 95.9% of home pages.

How is contrast ratio calculated?

WCAG defines the contrast between two colors as the ratio of their relative luminance. It ranges from 1:1 for two identical colors to 21:1 for white on black. The thresholds:

• AA, normal text: at least 4.5:1
• AA, large text (24 px and up, or about 19 px and up in bold): at least 3:1
• AAA, normal text: at least 7:1; 4.5:1 for large text
• UI components and graphics (button borders, form fields, icons, chart lines): at least 3:1

Most legal and corporate requirements target level AA. In the European Union, the European Accessibility Act has covered services such as e-commerce and banking since 28 June 2025; for businesses selling into the EU, accessibility is now an obligation rather than a choice.

We tested our own color

Miova’s brand purple #876FFF gives a 3.49:1 contrast on our site’s light background #F9FAFB. That means it passes for large headings and UI components, and fails AA for body text.

While writing this post we put the blog’s links through the same test. Links in body text were in brand purple and failed AA. We didn’t fix it by darkening the color but by splitting the job: link text is now the same color as body text, and what sets it apart is a thin purple underline. The text reads in every condition, and the line comfortably clears the 3:1 threshold for graphical elements. You can run the same test with your own colors using the tool below.

Contrast alone isn’t enough

Text can be hard to read even when the ratio passes. A few more rules:

• Watch thin weights. A thin font at small sizes looks faded even when the ratio passes. Prefer regular weights and above for body text.
• Line length. 45–75 characters per line is the range where the eye comfortably returns from the end of one line to the start of the next.
• Don’t rely on color alone. Show a form error with an icon and a message, not just a red border. The charts in this post also separate series with labels and a legend, not only color, and each chart has a button that opens its data as a table.
• A placeholder isn’t a label. Light gray placeholder text is often below even 3:1 and disappears once the user starts typing. Always name a field with a visible label.
• Focus must be visible. Keyboard users should see which element is selected through a clear focus outline.

Accessibility isn’t a checklist

Accessible design isn’t a rule set that limits design; it’s design that works in more conditions. A high-contrast interface reads in sunlight, with tired eyes and on a projector.

Brand colors aren’t the enemy of this process. Often a slightly darker or lighter shade of the same color keeps the brand’s character and delivers legibility. What matters is making that decision while the color palette is being built, not after launch.