Color and contrast

Color is where design and accessibility meet. Two rules cover most of what an editor controls: text must stand out from its background, and color cannot be the only way you say something.

Contrast: text people can read

Contrast is the difference in lightness between text and its background. Gray text on a white page, white text on a pale photo, and yellow on white are common failures. They hurt people with low vision, older readers, and everyone reading a phone in sunlight.

In the 2026 WebAIM Million, low contrast text was the most common failure: it appeared on 83.9 percent of the top one million home pages.

WCAG 2.1 AA sets the minimums as ratios:

• Normal text: at least 4.5 to 1.
• Large text, about 18 point, or 14 point bold: at least 3 to 1.
• Icons and the edges of form fields that people need to see: at least 3 to 1 against what is next to them.

Black on white is 21 to 1. Mid-gray text on white often lands below 4.5 to 1.

How to check, in a minute

You do not need to calculate anything. Free contrast checkers, such as the one from WebAIM, take two colors and tell you whether they pass. Many browsers' developer tools show contrast too.

As an editor, you usually choose colors only in a few places: text color buttons in the editor, banner and button colors in a page builder, and images with text on them. Check those.

If your site's standard colors fail, that is a fix for whoever manages the site's design, not something to work around page by page.

Text on photos

Text placed over a photograph is a frequent problem. The contrast changes across the picture: readable over the dark trees, invisible over the bright sky. It also changes when the site crops the photo differently on a phone.

Put the text on a solid background, below the photo, or in the page text instead.

Never color alone

WCAG 2.1 says color must not be the only way to convey information. The National Eye Institute says about 1 in 12 men have a color vision deficiency, and screen readers do not announce color at all.

Common slips and their fixes:

• Required fields marked only in red. Add "(required)" to the label.
• "Closed days are in red" on a calendar. Add the word "Closed."
• A chart whose lines differ only by color. Label the lines directly, or use different line styles.
• Links that differ from text only by color. Keep the underline.

A quick test: print the page in black and white, or picture it that way. If anything stops making sense, color was carrying meaning alone.