Color Contrast and Readable Text: Simple Rules for Accessible Design

Pale gray text, thin fonts and colored text over busy photos are popular design choices. They can look refined on a large, bright monitor in a design studio. On an older phone in sunlight, or for someone with low vision, color blindness or simply aging eyes, the same text can be difficult or impossible to read.

Readable design is not about making everything look plain. It is about choosing colors and type that let your message reach everyone. A few simple rules go a long way.

Understanding contrast ratio

Contrast ratio measures the difference in brightness between text and its background. It ranges from 1:1, such as white text on a white background, to 21:1, black on white.

The Web Content Accessibility Guidelines (WCAG) set minimum ratios. At Level AA, the common target:

• Normal text needs at least 4.5:1.
• Large text needs at least 3:1. WCAG defines large text as at least 18 point regular or 14 point bold, which is roughly 24 pixels regular or about 19 pixels bold on the web.
• Meaningful graphics and interface components, such as icons, form field borders and focus indicators, need at least 3:1 against their surroundings.

Level AAA sets a stricter 7:1 for normal text, which is worth aiming for in long reading passages where you can.

How to check your colors

You do not need to calculate ratios by hand. Free contrast checker tools let you enter two colors and see the ratio and whether it passes. Browser developer tools often show contrast information when you inspect text. Check:

• Body text and headings.
• Links, both in their normal state and when hovered or focused.
• Button text against button colors.
• Text placed over images or colored sections.
• Placeholder text and disabled states in forms.

Making brand colors work

Your brand palette may include colors that do not meet contrast requirements for text. That is common and fixable:

• Use brand colors for large areas, borders and accents, and use darker or lighter variations for text.
• Create an accessible palette with tested text and background pairings, and share it with everyone who designs materials.
• When text must sit on a photo, add a solid or semi-transparent overlay behind it, or place text beside the image instead.

Do not rely on color alone

Color vision deficiency is common, particularly among men, and many other people view screens in conditions where colors wash out. Anything communicated by color should also be communicated another way:

• Mark form errors with an icon and a written message, not only a red border.
• Underline links within paragraphs, or use another visible cue besides color.
• Label chart lines and segments directly, or use patterns in addition to color.
• Pair status colors, like green for available and red for full, with words.

Typography that helps reading

Contrast is only part of readable text. These choices matter too:

• Size: body text around 16 pixels is a widely used starting point on the web, and many designs go larger for comfort.
• Line height: generous spacing between lines, often around one and a half times the text size, makes paragraphs easier to follow.
• Line length: very long lines are tiring to read. Keep text columns comfortably narrow on large screens.
• Weight: very thin font weights reduce effective contrast, especially at small sizes.
• Capitalization: avoid long passages in all capital letters, which are harder to read.
• Alignment: left-aligned text is generally easier to read than fully justified text with uneven spacing.

Check dark mode and focus styles

If your site supports dark mode, test contrast there too, since colors that work on white may fail on black. Make sure the focus indicator, the outline that shows where keyboard users are on the page, is clearly visible against every background it appears on. Our keyboard accessibility test shows how to check this.

Look beyond the website

The same principles apply to everything you produce: slides projected in a bright room, printed bulletins and flyers, social media graphics, email newsletters and signs. Projectors and printers often wash out colors, so pairings that pass on a screen may fail on a wall or on paper. Test important materials in the conditions people will actually see them, and keep a printed copy of your accessible color pairings with whoever designs them.

Start with your most important pages

Run a contrast check on your homepage, main navigation, buttons and forms first. Fix the failures, update your style guide so new materials start out accessible, and then work through the rest of your site. Contrast is one item on our broader website accessibility checklist, and it is often one of the quickest to improve.