How to Check Color Contrast Before You Publish (WCAG Basics)

October 17, 2026 • NOFYI Editorial Team

Why Looks Alone Are Not Enough

When you choose colours for a website, a document, or a presentation, it is natural to judge them by eye. If the text looks clear to you, it is tempting to assume it will look clear to everyone. That assumption is risky. Vision varies widely. Some people have low vision, some have colour vision differences, and many people read screens in bright sunlight, on low-brightness devices, or on older monitors. A combination that looks fine in your office can be hard to read for someone else.

Colour contrast is a measurable way to describe how easy it is to distinguish text from its background. It is expressed as a ratio, such as 4.5 to 1. A higher ratio means a stronger difference between the text and the background. A lower ratio means a weaker difference. By checking the ratio before you publish, you replace guesswork with a number you can compare against a standard.

The standard most people use is the Web Content Accessibility Guidelines, usually called WCAG. WCAG gives clear thresholds for text contrast. This guide explains what those thresholds are, how to check a colour pair, and how to fix a pair that fails. You do not need design training to follow it. You need the two colour values and a contrast checker.

What the Contrast Ratio Means

The contrast ratio compares the relative luminance of the lighter colour with the relative luminance of the darker colour. Luminance is a measure of how light or dark a colour appears, taking into account how the human eye responds to different wavelengths. The ratio ranges from 1 to 1, which means no difference, to 21 to 1, which is the maximum possible difference.

Black text on a white background gives the maximum ratio of 21 to 1. That is the strongest contrast you can get. White text on a black background also gives 21 to 1. As the colours get closer together, the ratio drops. Light grey text on a white background, for example, has a very low ratio and is hard to read, even though it may look elegant at first glance.

It is important to understand that the ratio is not about how pretty a combination looks. It is about how distinguishable the text is from its background. A combination can be attractive and still fail. A combination can also be plain and pass easily. The ratio gives you an objective check that does not depend on your taste or your screen.

Contrast checkers calculate the ratio for you. You enter the foreground colour and the background colour, usually as hex codes such as #000000 for black and #FFFFFF for white, and the tool returns the ratio. You do not need to do the luminance calculation by hand. You only need to know how to read the result and which threshold applies.

The WCAG Thresholds You Need

WCAG defines two main levels for text contrast in its widely used version 2 guidance. Level AA is the level most websites aim for. Level AAA is stricter and is a good target when it is practical.

For normal text at Level AA, the contrast ratio must be at least 4.5 to 1. Normal text means ordinary body text, such as paragraphs, list items, and table cells. Most of the text on a page falls into this category, so 4.5 to 1 is the number to remember.

For large text at Level AA, the contrast ratio must be at least 3 to 1. Large text is defined in WCAG as text that is at least 18 point, or 14 point bold. Headings that are large enough can use this lower threshold. The reason is that larger, bolder letterforms are easier to read, so they need less contrast to remain legible.

For Level AAA, the thresholds are higher: at least 7 to 1 for normal text, and at least 4.5 to 1 for large text. Level AAA is harder to achieve, especially with colourful designs, but it gives a stronger guarantee of readability. If you can reach it without harming the design, do so. If you cannot, meeting Level AA is still a solid and widely accepted standard.

Non-text elements have their own guidance. User interface components, such as form field borders and focus indicators, and meaningful graphics, such as icons that convey information, generally need at least 3 to 1 against adjacent colours. This guide focuses on text, but the same principle applies: if a reader must distinguish something to use it, check its contrast too.

How to Check Contrast Before You Publish

Identify the exact colours. Find the foreground and background colours as hex codes or RGB values. Do not guess from a screenshot, because screenshots can shift colours. Use the values from your design file, stylesheet, or theme settings.
Enter the pair into a contrast checker. Put the text colour in the foreground field and the background colour in the background field. If you swap them, the ratio will be the same, because the ratio compares lighter against darker, but keeping the roles clear helps you record the result accurately.
Read the ratio. Note the number, such as 4.54 to 1. Do not round it in a way that hides a failure. A ratio of 4.49 to 1 does not meet a 4.5 to 1 threshold, even though it is close.
Compare it with the correct threshold. Use 4.5 to 1 for normal text and 3 to 1 for large text at Level AA. Check whether the pair passes or fails for the size and weight of the text you are actually using.
Check every important state. Test body text, headings, links, buttons, placeholders, and text over images. A pair that passes for a heading may fail for small body text. A pair that passes on a solid background may fail over a photograph.
Fix failures before you publish. Darken the text, lighten the background, increase the font size or weight, or add a solid background behind text over an image. Recheck after each change.
Record the result. Keep a short note of the colour pair and its ratio, so you can check it again if the design changes. A small table in your style guide is enough.

This checklist takes only a few minutes per colour pair, and it prevents one of the most common accessibility problems on the web. Make it part of your publishing routine, just like proofreading.

Worked Example: Grey Text on White

Consider the colour #767676, a medium grey, used for body text on a white background, #FFFFFF. This is a common choice, because grey can look softer and less harsh than pure black. The question is whether it is strong enough to read comfortably.

Enter the foreground as #767676 and the background as #FFFFFF into a contrast checker. The result is a ratio of about 4.54 to 1. That is just above the 4.5 to 1 threshold for normal text at Level AA. It passes, but only by a small margin.

That narrow pass matters. It means the combination is acceptable for normal text under WCAG Level AA, but it is not a comfortable pass. A slightly lighter grey, such as #777777 on white, would be close to the line as well, and a lighter grey such as #999999 would fail for normal text. If you want a safer margin, choose a darker grey, such as #595959, which gives a ratio well above 7 to 1 on white and passes Level AAA for normal text.

The same #767676 grey on a light grey background would fail. Contrast depends on the pair, not on one colour alone. A text colour that passes on white may fail on a tinted background. Always check the exact pair you plan to publish, not a similar pair from another page.

For large text, #767676 on white passes more comfortably, because the threshold is only 3 to 1. That does not mean it is a good choice for small text. The size and weight of the text decide which threshold applies, so check the text as it will actually appear, not as it appears in a large preview.

Common Failures and How to Fix Them

One common failure is light grey text on white. Designers sometimes use very light grey for secondary text, such as captions or footnotes, to make it look less important. The result is text that many readers cannot read. The fix is to darken the grey until it passes. You can keep the visual hierarchy by using size, spacing, or weight, rather than by making the text faint.

Another common failure is coloured text on a coloured background. A red button with white text may pass, or it may not, depending on the shade of red. A yellow button with white text almost always fails, because yellow is light and white is light. When you use a coloured background, test the exact shade. If it fails, darken the background, use dark text on a light background, or add a border that improves the distinction.

Text over images is another frequent problem. An image may have light and dark areas, so a text colour that is clear over one part may be unreadable over another. The fix is to place a solid or semi-transparent dark overlay behind the text, or to use a solid background block. Do not rely on the image being dark enough everywhere. Check the worst-case area, not the average.

Placeholder text in form fields often fails because it is rendered in a light grey. Placeholder text is also not a replacement for a visible label. Keep labels visible, and make sure any placeholder, hint, or help text meets the same contrast threshold as other text.

Finally, do not use colour alone to convey meaning. A link that is only distinguished by colour may be invisible to someone who cannot see that colour difference. Use an underline, an icon, or a clear label as well. Contrast helps people see the difference, but a second cue helps people who cannot see the colour difference at all.

Check More Than Body Text

Many teams check only their main body text and forget the rest of the page. Links, buttons, navigation, form labels, error messages, and footer text all need checking. Error messages are especially important. If an error is shown in a low-contrast colour, a reader may not notice it and may not know what to fix.

Focus indicators need checking too. When a reader tabs through a page with a keyboard, the focus outline shows where they are. If that outline has low contrast against the background, keyboard users can lose their place. Test the focus style in the same way you test text.

Charts and diagrams need care as well. If a chart uses colour alone to distinguish lines or segments, and those colours have low contrast against the background or against each other, the chart will be hard to read. Add labels, patterns, or direct annotations so the meaning does not depend on colour alone.

A good habit is to check the whole page in a checklist, not just one pair. List the foreground and background for each element, record the ratio, and note whether it passes for its size. That record makes it easy to spot the one element you missed.

Limitations of a Contrast Check

A contrast check is necessary, but it is not sufficient on its own. First, it measures colour difference, not readability in general. Font choice, line spacing, line length, and text size all affect readability. A page that passes contrast can still be hard to read if the font is too small or the lines are too long.

Second, a checker tests the colours you enter. If the published page uses different colours, for example because a theme override, a dark mode, or a user setting changes them, your check may not reflect what readers see. Test the colours in the actual published state, including dark mode if your site offers it.

Third, WCAG thresholds are minimums, not ideals. Passing 4.5 to 1 does not mean the text is comfortable for everyone. A higher ratio is usually better for body text, especially for long articles. Treat the threshold as a floor, not a target to barely clear.

Fourth, contrast does not capture colour vision differences. Two colours can have good contrast and still be confusing if they are distinguished only by hue. Use text, shape, and layout as well as colour. That way, the meaning survives even when colour perception differs.

Finally, automated checkers can miss text over complex backgrounds, text in images, and text that appears only on hover or focus. Manual review is still needed. Use the checker as a tool, not as a guarantee.

Frequently Asked Questions

What is a good contrast ratio for normal text?

For WCAG Level AA, normal text needs at least 4.5 to 1. For Level AAA, it needs at least 7 to 1. Black on white, at 21 to 1, is the maximum. A ratio just above 4.5 to 1 passes Level AA, but a higher ratio gives a more comfortable margin.

What counts as large text?

In WCAG, large text is at least 18 point, or 14 point bold. Large text needs at least 3 to 1 at Level AA. The lower threshold reflects that larger, bolder letterforms are easier to read. Check the size and weight of the text as it will actually appear.

Does #767676 on white pass?

Yes, for normal text at Level AA, with a ratio of about 4.54 to 1. It is a narrow pass. A slightly lighter grey would fail for normal text. If you want a safer margin, choose a darker grey. Always recheck the exact pair, because a different background can change the result.

Should I trust my eyes instead of a checker?

No. Do not rely on looks alone. Your screen, lighting, and vision affect what you see. A checker gives an objective ratio you can compare with WCAG thresholds. Use your eyes to judge design, and use the checker to judge contrast.

Conclusion

Checking colour contrast before you publish is a small step with a large effect. Remember the key numbers: 21 to 1 is black on white, 4.5 to 1 is the Level AA minimum for normal text, and 3 to 1 is the Level AA minimum for large text. Test the exact colour pair, check every important state, and fix failures by darkening the text or lightening the background. Do not rely on looks alone. A measured check makes your content readable for more people, and that is worth the few minutes it takes.