Skip to content
Kordu Tools

Colour Contrast Checker

Popular

Check WCAG colour contrast ratios between foreground and background colours instantly.

Luminance: 0.0116

Luminance: 1.0000

Contrast ratio

17.06:1

AA Normal(4.5:1)
Pass
AA Large(3:1)
Pass
AAA Normal(7:1)
Pass
AAA Large(4.5:1)
Pass

Large text sample (24px bold)

Normal text sample (16px) — The quick brown fox jumps over the lazy dog.

Small text sample (12px) — This is how small body text would appear with these colour choices.

How to use

  1. 1

    Choose your colours

    Select a foreground (text) colour and a background colour using the colour pickers or by typing hex codes.

  2. 2

    Read the contrast ratio

    The contrast ratio is calculated and displayed immediately, along with pass/fail badges for each WCAG level.

  3. 3

    Review the live preview

    See how your colour combination looks on large (24px), normal (16px), and small (12px) text in the preview panel.

  4. 4

    Adjust or swap

    Use the Swap colours button to invert your selection, try a common preset, or fine-tune the hex values until all required levels pass.

Frequently asked questions

What contrast ratio do I need for WCAG AA?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal-sized text and 3:1 for large text (18px+ bold or 24px+ regular).
What is the difference between AA and AAA?
AA is the minimum recommended level for most web content. AAA is a stricter standard requiring 7:1 for normal text and 4.5:1 for large text, intended for enhanced accessibility.
How is relative luminance calculated?
Each sRGB channel is converted from 0-255 to a linear value, then combined using the formula L = 0.2126R + 0.7152G + 0.0722B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter colour.
Is my data sent to a server?
No. All contrast calculations happen entirely in your browser. No colour data is uploaded, stored, or logged.

Verify whether your colour combinations meet WCAG accessibility

standards. Enter a foreground (text) colour and a background colour

using the native colour pickers or hex input fields, then see the

contrast ratio and pass/fail badges for AA Normal, AA Large, AAA Normal,

and AAA Large levels in real time. A live preview shows how large,

normal, and small text renders with your chosen colours. Swap colours

with one click or pick from common presets. Relative luminance values

are displayed for each colour. All calculations run in your browser

with no data sent to any server.

Related tools

Colour Picker

Pick a colour and inspect HEX, RGB, HSL, HSV, CMYK, alpha, and decimal values instantly.