Colour contrast is one of the most frequently overlooked aspects of web design, and one of the most frequently failed accessibility requirements. It affects roughly 300 million people worldwide who have some form of colour vision deficiency, as well as people with low vision, people using screens in bright sunlight, and older users whose visual acuity has declined. Getting it right is not complicated, but it requires understanding what the standards actually require and how to verify your design meets them.

This article explains the WCAG colour contrast requirements at AA and AAA level, what they mean in practice, and how to test your site against them.

What WCAG Is and Why It Matters

WCAG stands for Web Content Accessibility Guidelines. It is an international standard published by the W3C (World Wide Web Consortium) and widely adopted as the benchmark for web accessibility compliance. WCAG is structured into three conformance levels:

• Level A: Minimum requirements. Not meeting these creates severe barriers for users with disabilities.
• Level AA: The standard most legal frameworks and accessibility policies reference. Represents a solid, practical level of accessibility for most web content.
• Level AAA: The highest level. Difficult to meet on all content; typically applied selectively to specific content types or contexts.

For most organisations and most websites, WCAG 2.1 Level AA is the target. AAA is aspirational for standard web content, but certain elements, particularly those serving users with specific needs, may be worth pushing to AAA.

How Contrast Ratio Is Calculated

Colour contrast is expressed as a ratio. The ratio compares the relative luminance of two colours, typically the foreground text colour and the background colour. The ratio ranges from 1:1 (identical colours, no contrast at all) to 21:1 (black text on white background, maximum contrast).

The calculation uses a formula based on the relative luminance values of each colour according to the sRGB colour space. You do not need to perform this calculation manually since testing tools handle it, but understanding that it is luminance-based (not just darkness) is important. Two colours can appear very different and still have a low contrast ratio if they are similar in luminance.

For example: bright red text on a bright green background looks striking but may have a poor contrast ratio because both colours have similar luminance values. This is why “colourful” does not equal “accessible.”

WCAG AA Requirements

Normal Text

Minimum contrast ratio: 4.5:1

This applies to text that is 18px or smaller (when not bold), or 14px or smaller when bold.

A ratio of 4.5:1 means the foreground colour is 4.5 times as luminous or as dark as the background. In practical terms, this rules out light grey text on white backgrounds, pale yellow text on white, or mid-tone text on a mid-tone background.

Large Text

Minimum contrast ratio: 3:1

Large text is defined as 18px or larger (not bold), or 14px or larger (bold). The lower threshold reflects the fact that larger text is easier to read at lower contrast.

UI Components and Graphical Objects

Minimum contrast ratio: 3:1

This applies to interface elements like input field borders, button outlines, focus indicators, and meaningful graphical elements such as icons that convey information or chart elements. A button with a border too close in colour to the background would fail this requirement.

WCAG AAA Requirements

Normal Text

Minimum contrast ratio: 7:1

AAA requires significantly higher contrast for body text. This level is demanding and pushes design toward high-contrast combinations that feel stark to some designers. Pure black on white (21:1) comfortably passes; mid-dark grey on white (#333 on white is approximately 12.6:1) also passes. But many typical design choices such as coloured text, grey-on-grey, and dark text on a dark coloured background will not reach 7:1.

Large Text

Minimum contrast ratio: 4.5:1

The large text threshold at AAA matches the normal text threshold at AA. This is worth noting: if you are meeting AA for normal text (4.5:1), you are already at AAA for large text.

What the Requirements Do and Do Not Cover

Not Covered by WCAG Contrast Requirements

• Decorative text: Text that is purely decorative and carries no information does not need to meet contrast requirements.
• Logotypes: Text that is part of a logo or brand mark is exempt.
• Inactive UI components: Disabled form fields or greyed-out controls that users cannot interact with are not required to meet contrast ratios, though they should still be visually distinguishable from active elements where possible.
• Incidental text: Text that appears in a photograph or other image where the author has no control over the background.

Covered but Sometimes Missed

• Placeholder text in form fields: This is covered. Light grey placeholder text on a white input background often fails.
• Focus indicators: The border or outline that appears when a keyboard user focuses on an interactive element must meet the 3:1 UI component ratio.
• Text in images: If an image contains text that is meaningful and not decorative, that text must meet the contrast requirements.
• Hover states: If a button changes colour on hover, the hover state must also meet requirements.

How to Test Colour Contrast

Manual Tools

WebAIM Contrast Checker (webaim.org/resources/contrastchecker) Enter hex values for your foreground and background colours and get an instant pass/fail for AA and AAA, for both normal and large text. Simple, reliable, and free.

Colour Contrast Analyser (by TPGi) A desktop application for macOS and Windows that lets you use an eyedropper to sample colours directly from your screen. Invaluable for checking colours in rendered interfaces where hex values are not easily available.

Coolors Contrast Checker A well-designed online tool that also provides alternative colour suggestions when your chosen pairing fails.

Browser-Based Testing

Chrome DevTools Open DevTools (F12), inspect a text element, and click the colour swatch in the Styles panel. Chrome shows the current contrast ratio and indicates whether it passes AA and AAA.

Firefox Accessibility Inspector Firefox’s built-in accessibility tools include a colour contrast checker that highlights elements failing contrast requirements across the whole page.

Automated Accessibility Scanners

Axe (browser extension or integrated into DevTools) Axe is widely regarded as one of the most reliable automated accessibility testing tools. It catches contrast failures alongside other WCAG violations. Available as a browser extension and as a developer tool (axe-core integrates into testing pipelines).

Wave (wave.webaim.org) Enter your URL and WAVE produces a visual overlay of accessibility issues, including contrast errors. Useful for a quick site-wide audit.

Lighthouse (in Chrome DevTools) Lighthouse’s accessibility audit includes contrast checking. It will not catch every contrast failure, particularly on dynamically rendered content, but it is a fast first pass.

Practical Design Guidance

Black and Dark Grey Are Your Friends

Pure black (#000000) on white (#FFFFFF) has a contrast ratio of 21:1, passing both AA and AAA for all text sizes. If your design uses a dark grey body text colour, verify the ratio before committing to it. #333333 on white is approximately 12.6:1 (passes AAA). #777777 on white is approximately 4.5:1 (passes AA for normal text, barely). #999999 on white is approximately 2.8:1 (fails AA).

Coloured Text Requires Extra Care

Brand colours used for text must be verified. A corporate blue that looks “dark enough” may fail when placed on a white background. Always check rather than assuming.

Do Not Rely on Colour Alone

This is a separate but related accessibility requirement: information should not be conveyed by colour alone. A form that marks required fields in red only, with no text label or asterisk, fails users who cannot distinguish red from other colours.

Design for Contrast from the Start

Retrofitting contrast into a completed design is painful. Build it into your colour palette from the beginning. When defining brand colours, define contrast-compliant text colours alongside them, not as an afterthought.

Where to Set the Bar

For most client websites, WCAG 2.1 AA is the appropriate standard. It is legally referenced in many jurisdictions, provides genuine accessibility for the majority of users with visual needs, and is achievable with thoughtful design choices.

AAA for normal text (7:1) is worth pursuing for:

• Sites primarily serving users with known visual accessibility needs
• High-text content like documentation, long-form articles, or instructional content
• Public sector organisations that have committed to maximum accessibility

For a typical business or commercial site, meeting AA across the board and AAA for large text is a solid and defensible standard.

Colour contrast is one of the accessibility requirements that is both fully objective and fully testable before launch. There is no ambiguity about whether a colour combination passes or fails. The maths either works or it does not. The tools to check are free and easy to use. The design adjustments needed to pass are almost always achievable without compromising the visual identity. There is no good argument for shipping a site that fails.