🧰 Developer tools

Colour contrast checker (WCAG)

Enter a text colour and a background colour to get the WCAG contrast ratio and see whether it passes AA and AAA for normal and large text.

Free · no signup Runs in your browser

Large text sample
Normal text sample: the quick brown fox jumps over the lazy dog.
Contrast ratio—

    How do I check colour contrast?

    Enter the text colour and the background colour as HEX codes, or use the pickers. The tool calculates the WCAG contrast ratio, from 1 : 1 for identical colours to 21 : 1 for black on white, and shows whether it passes level AA (at least 4.5 : 1 for normal text and 3 : 1 for large text) and level AAA (7 : 1 and 4.5 : 1). A preview shows how the text looks.

    Why contrast matters

    Text that is hard to read is hard to read for everyone, and impossible for some. People with low vision or colour-vision deficiency, anyone using a phone in sunlight, and anyone on a poor screen all depend on enough contrast between text and its background. It is also a legal and procurement requirement on many public-sector and commercial sites, and the Web Content Accessibility Guidelines (WCAG) give the measurable standard.

    The ratio is calculated from the relative luminance of the two colours: the lighter luminance plus 0.05, divided by the darker plus 0.05. Level AA asks for at least 4.5 : 1 for normal text and 3 : 1 for large text. Level AAA asks for 7 : 1 and 4.5 : 1. WCAG 2.1 also asks for 3 : 1 for the parts of interface components and graphics needed to understand them, such as icons and the border of an input.

    It runs in your browser. Nothing you enter is sent anywhere.

    When to use it

    • Choosing text and background colours for a design
    • Checking that a brand colour is readable on white or black
    • Auditing a page for accessibility
    • Fixing a failing result from an automated checker

    Mistakes it helps you avoid

    • Judging contrast by eye: two colours that look fine to you can fail.
    • Using light grey text on white for 'secondary' text.
    • Forgetting that large text has a lower threshold than normal text.
    • Checking only the default state: hover, focus and disabled states need contrast too.

    How it works

    Everything happens in your browser as you type.

    • relative luminance L = 0.2126 × R + 0.7152 × G + 0.0722 × B, where each channel c (0 to 1) is first converted:
    • c ≤ 0.03928: c ÷ 12.92 otherwise: ((c + 0.055) ÷ 1.055) ^ 2.4
    • contrast ratio = (L lighter + 0.05) ÷ (L darker + 0.05)
    • AA: 4.5 (normal), 3 (large) AAA: 7 (normal), 4.5 (large) interface components and graphics: 3

    These are the formulas in WCAG 2.1. The ratio is rounded down to two decimals (so a ratio of 4.499 does not pass as 4.5). Large text is at least 18 point (24 CSS pixels) or 14 point (about 18.7 pixels) bold. Logos and decorative text are exempt from the requirement. WCAG 3 may change the method in future.

    Example: grey text on white

    You use the grey #767676 for text on a white background.

    1. Luminance of #7676760.181
    2. Luminance of white1.000
    3. Ratio: (1 + 0.05) ÷ (0.181 + 0.05)4.54 : 1

    4.54 : 1, which passes AA for normal text (4.5 : 1) but not AAA (7 : 1)

    A slightly lighter grey, #777777, falls just below 4.5 : 1.

    Terms on this page

    Contrast ratio
    A number from 1 to 21 comparing the brightness of two colours.
    WCAG
    The Web Content Accessibility Guidelines, the main standard for accessible websites.

    Common questions

    What is a good contrast ratio?

    At least 4.5 : 1 for normal text (WCAG level AA), 3 : 1 for large text and 7 : 1 for the stricter AAA level.

    What counts as large text?

    At least 18 point (24 CSS pixels), or 14 point (about 18.7 pixels) when bold.

    Does contrast apply to buttons and icons?

    Yes. WCAG 2.1 asks for 3 : 1 for the parts of user interface components and graphics that are needed to understand the content.

    Is white on black the best?

    It gives the maximum ratio of 21 : 1, but a very high contrast can be tiring for some readers. Anything above the AA thresholds is accessible.

    Is my colour data uploaded?

    No. The calculation is done in your browser.

    What to work out next

    Where these numbers come from

    Last verified 2026-10-25 The method on this page is checked against the sources above at least once a year. Spotted something out of date? Tell us and we will fix it.

    Related tools

    Colour converter

    Convert a colour between HEX, RGB and HSL, with a colour picker, and copy the CSS value you need.

    Open tool

    Meta checker

    Check the length of a page title and meta description and see a search result preview before you publish.

    Open tool

    Image resizer

    Change a picture's size in pixels by width, height, percentage or exact size. Many files at once, nothing uploaded.

    Open tool

    Image colour picker

    Click any point of a picture to get its HEX, RGB, HSL and CMYK values, see the picture's main colours as a palette, or pick from anywhere on screen. Free, private.

    Open tool

    IPv4 subnet calculator

    Enter an IPv4 address and prefix to get the network and broadcast addresses, subnet and wildcard masks, host range and usable hosts, and split a network into smaller subnets.

    Open tool

    QR code generator

    Make a QR code for a link, text, Wi-Fi network, email, phone number, text message or contact card, and download it as PNG or SVG.

    Open tool

    🧰 Developer and web tools

    Small developer and web jobs done in your browser. What you paste or choose is never sent anywhere.

    See all 24 tools in this section