Contrast Ratio Calculator
This calculator works out the contrast ratio between any two colours, the WCAG measure of whether text or interface elements will be readable against their background. Enter a hex code for your foreground (text) colour and your background colour, or use the colour pickers or preset swatches, then watch the live preview update as you adjust each one. The tool applies the WCAG 2.1 relative luminance formula to both colours and returns the contrast ratio, the foreground and background relative luminance values, and an overall grade. It then checks that ratio against the official WCAG thresholds, showing a pass or fail for normal text, large text of 18pt and above, and user interface components, plus the stricter AAA level for normal and large text and a summary of the best level your combination achieves. A detailed breakdown shows the linearised RGB channels and luminance for each colour and the exact formula used to reach the final figure, so you can see every step of the working. Use it to check body text, headings, buttons and icons meet WCAG AA before you publish a design, or aim for AAA where higher accessibility matters. Colour inputs must be valid 6-digit hex codes, results apply to standard sRGB colour space, and the ratio alone does not account for colour blindness, so treat borderline results as a guide rather than a final sign-off.
1. Foreground Colour (Text)
2. Background Colour
WCAG 2.1 Accessibility Check
Minimum 4.5:1
Minimum 3:1
Minimum 3:1
Minimum 7:1
Minimum 4.5:1
Best level achieved
Luminance Breakdown
Calculation Steps
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 Rlin + 0.7152 x Glin + 0.0722 x Blin
- Determine contrast ratio: CR = (Llighter + 0.05) / (Ldarker + 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.