How to check if your colors are accessible

Contrast check for WCAG AA compliance with Coco by Smooth Mojo

What WCAG actually requires

WCAG stands for Web Content Accessibility Guidelines. It's the standard that defines how to make websites usable for people with visual impairments, motor disabilities, and other conditions. The part that matters for color is the contrast ratio between your text and its background.

The guidelines define two levels: AA and AAA. Most teams target AA because it's the widely accepted minimum. AAA is stricter and harder to hit with a colorful design, but it's worth considering for body text where readability matters most.

An overview of AA requirements:

Normal text (less than 18pt/24px): Minimum contrast ratio of 4.5:1
Large text (at least 18pt/24px or 14pt/18.66px bold): Minimum contrast ratio of 3:1
Graphical elements like icons, buttons, form borders, and focus indicators also need at least 3:1

Branding, logos, disabled elements, and decorative text are exempt from contrast requirements. Everything else needs to pass.

What passing and failing looks like

Take a look at this white text on a dark background at two different contrast levels:

This text passes AA Ratio: 12.6:1

This text fails AA Ratio: 2.1:1

The failing example is technically visible if you squint, but it's hard to read. Now imagine someone with low vision, or someone reading on their phone outside in bright sunlight. That's who the guidelines are protecting.

How to test your colors

The simplest way is to plug your text color and background color into a contrast checker. We built Coco for exactly this. Enter two hex values and it tells you the contrast ratio, whether you pass AA and AAA, and whether it works for normal text, large text, and UI elements.

If you're working with a full palette, test every combination you actually use. A color might pass against your background but fail when it shows up on a card, a banner, or a hover state. Context matters.

Quick test: If you're not sure whether a color pairing works, try this. Take a screenshot of your design, convert it to grayscale, and check if you can still read everything. If text disappears into the background in grayscale, it probably fails contrast requirements in color too.

Common mistakes

A few things that come up over and over in real projects:

Light gray text on white backgrounds. This is the most common accessibility failure on the web. Placeholder text, footer links, captions, and timestamps are often styled with grays that look fine on a design tool but fail contrast in the real world. If your gray text is lighter than #767676 on a white background, it won't pass AA.

Colored text on colored backgrounds. Green text on a blue background, or orange on red. These can have enough lightness difference to look distinct but still fail the contrast ratio. Always check the actual numbers instead of eyeballing it.

Relying on color alone. Error messages in red, success states in green, required fields marked with a colored asterisk. If color is the only signal, colorblind users will miss it. Add an icon, a label, a border, or an underline alongside the color.

What to do right now

Open Coco in another tab. Grab the hex values for your primary text color and your background color. Check the ratio. Then check your secondary text, your link color, and your button text against their respective backgrounds.

If something fails, you usually don't need to change the color entirely. Making the text slightly darker or the background slightly lighter by one or two steps is often enough to cross the 4.5:1 threshold without changing the feel of your design. This is where it's good to have a 'color ramp' of different lighter and darker shades, for flexible design decisions.

Check Your Colors with Coco