What contrast ratio do I need to pass WCAG AA?

To pass WCAG 2.1 Level AA, normal body text (below 18pt or 14pt bold) requires a minimum contrast ratio of 4.5:1 against its background. Large text (18pt or larger, or 14pt bold or larger) requires a minimum of 3:1. User interface components and graphical objects also require a minimum of 3:1 against adjacent colours. Level AAA is stricter: normal text needs 7:1 and large text needs 4.5:1. These requirements apply to all web content covered by accessibility guidelines and most public-sector websites in New Zealand under the Web Accessibility Standard 1.1.

How is contrast ratio calculated?

Contrast ratio is calculated using the WCAG relative luminance formula. First, each RGB channel value (0 to 255) is divided by 255 to get a value between 0 and 1. Values at or below 0.04045 are divided by 12.92; values above 0.04045 use the formula ((channel + 0.055) / 1.055) raised to the power of 2.4. The relative luminance L is then: L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the higher of the two luminance values. The 0.05 offset represents the luminance of the display surface. The result is expressed as a ratio such as 4.5:1 or 21:1.

What is the highest possible contrast ratio?

The maximum possible contrast ratio is 21:1, which occurs between pure white (#FFFFFF, relative luminance 1.0) and pure black (#000000, relative luminance 0.0). The formula gives (1.0 + 0.05) / (0.0 + 0.05) = 1.05 / 0.05 = 21. The minimum possible contrast ratio is 1:1, which occurs when both colours are identical. Most accessible colour combinations for body text fall between 4.5:1 and 15:1.

Contrast Ratio Calculator

Calculate the contrast ratio between any two colours using the WCAG 2.1 relative luminance formula. Enter hex colour codes or use the colour pickers to check whether your colour pairs meet accessibility standards for text, large headings, and interface components.

Calculate.co.nz is proud to be partnered with Premium Homes, a recognised leader in eco-friendly, sustainable, and energy-efficient homebuilding. With a dedicated team and award-winning experience, they create homes that prioritise health, comfort, and long-term performance. Their founders, Andrew and Kelly, set out to raise the standard of residential construction in New Zealand by combining practical building expertise with a clear commitment to doing things better for homeowners.

WCAG 2.1 formula W3C Web Content Accessibility Guidelines 2.1 (ISO/IEC 40500:2012). WCAG 3.0 draft does not yet replace this standard.

1. Foreground Colour (Text)

Foreground hex colour (e.g. #1a1a2e)

Or choose a preset

Sample Text

2. Background Colour

Background hex colour (e.g. #ffffff)

Or choose a preset

Sample Text

Sample Text on This Background

Contrast Ratio Result

Contrast Ratio
-
Higher is better

Foreground Luminance

Relative (0 to 1)

Background Luminance

Relative (0 to 1)

Overall Grade

Best WCAG level met

WCAG 2.1 Accessibility Check

Normal text
Minimum 4.5:1

Large text (18pt+)
Minimum 3:1

UI components
Minimum 3:1

AAA

Normal text
Minimum 7:1

AAA

Large text (18pt+)
Minimum 4.5:1

Summary

Overall rating
Best level achieved

Luminance Breakdown

Foreground colour-

Foreground RGB-

Foreground linearised R-

Foreground linearised G-

Foreground linearised B-

Foreground luminance (L1)-

Calculation Steps

Background colour-

Background RGB-

Background luminance (L2)-

Lighter luminance (L1)-

Darker luminance (L2)-

Contrast ratio formula-

Result: Enter two colours above to check their contrast ratio.

What Is Contrast Ratio?

Contrast ratio is a measure of the visual difference in luminance between two colours, typically a foreground (text) and background colour. It is expressed as a ratio such as 4.5:1 or 21:1. A ratio of 1:1 means the colours are identical with no contrast. A ratio of 21:1 is the maximum possible contrast, achieved between pure white and pure black.

High contrast between text and background is essential for readability, particularly for people with low vision, colour blindness, or who read in challenging lighting conditions. The Web Content Accessibility Guidelines (WCAG) published by the W3C set minimum contrast requirements for digital content. New Zealand's government web accessibility standard (Web Accessibility Standard 1.1) requires conformance with WCAG 2.1 Level AA.

The WCAG Relative Luminance Formula

WCAG 2.1 defines relative luminance as the normalised luminance of a colour, ranging from 0 (pure black) to 1 (pure white). The calculation steps are:

Divide each RGB channel value (0 to 255) by 255 to get a value between 0 and 1.
Linearise each channel: if the channel value is 0.04045 or below, divide by 12.92. If above 0.04045, apply: ((value + 0.055) / 1.055) ^ 2.4
Calculate relative luminance: L = 0.2126 x R_lin + 0.7152 x G_lin + 0.0722 x B_lin
Determine contrast ratio: CR = (L_lighter + 0.05) / (L_darker + 0.05)

The 0.05 offset in the contrast ratio formula represents the luminance of the display surface, accounting for the fact that even a "black" screen has some minimum light output.

WCAG Accessibility Requirements

Content Type	WCAG AA (minimum)	WCAG AAA (enhanced)
Normal body text (below 18pt or 14pt bold)	4.5:1	7:1
Large text (18pt or larger, or 14pt bold or larger)	3:1	4.5:1
UI components and graphical objects	3:1	Not defined
Decorative text or logos	No requirement	No requirement
Disabled text or components	No requirement	No requirement

Note: 18pt is approximately 24px at standard screen resolution. 14pt bold is approximately 18.67px bold.

Worked Example

Using white (#ffffff) as the foreground (text colour) and black (#000000) as the background:

White RGB: (255, 255, 255). Each channel divided by 255 = 1.0. All channels are above 0.04045, so linearised: ((1.0 + 0.055) / 1.055)^2.4 = 1.0. Luminance = 0.2126 x 1.0 + 0.7152 x 1.0 + 0.0722 x 1.0 = 1.0000
Black RGB: (0, 0, 0). Each channel = 0. Luminance = 0.0000
Contrast ratio = (1.0 + 0.05) / (0.0 + 0.05) = 1.05 / 0.05 = 21.0:1
Result: passes WCAG AA and AAA for all text sizes and UI components

This 21:1 ratio is the maximum achievable and represents the default output of this calculator. Most designs aim for at least 4.5:1 for body text, which allows more colour freedom while maintaining accessibility.

Practical Tips for Accessible Colour Design

Dark text on a light background (or vice versa) is usually the simplest way to achieve high contrast.
Medium grey text (such as #6b7280) on white (#ffffff) gives approximately 4.8:1, which just passes AA for body text.
Coloured text on coloured backgrounds (such as red on green) can be problematic: the contrast ratio may be adequate but colour blind users may not distinguish the colours at all.
Contrast ratio does not account for colour blindness. Use separate colour blindness simulation tools in addition to this calculator.
When choosing brand or design colours, check contrast early in the process. It is much easier to adjust colours before final sign-off.

Related Calculators

Maths and Stats Calculators: full hub of ratio, statistics, and geometry tools.
Aspect Ratio Calculator: calculate width-to-height ratios for screens and images.
Screen Ratio Calculator: work out screen dimensions from a given ratio.
Image Ratio Calculator: find the aspect ratio of an image from its pixel dimensions.

Sources and method: W3C Web Content Accessibility Guidelines (WCAG) 2.1, Success Criterion 1.4.3 (Contrast Minimum) and 1.4.6 (Contrast Enhanced) (w3.org/TR/WCAG21). W3C WCAG 2.x relative luminance definition and contrast ratio formula (w3.org/TR/WCAG21/#dfn-relative-luminance). New Zealand Government Web Accessibility Standard 1.1 (digital.govt.nz).

This calculator implements the WCAG 2.1 relative luminance and contrast ratio formula exactly as defined by the W3C. Results apply to standard sRGB colour space. Colour inputs must be valid 6-digit hex codes. The calculator does not account for colour blindness, font rendering differences, or non-standard display profiles.