Colour contrast checker

Type or pick the text colour and the background colour. We tell you their contrast ratio and whether it meets WCAG levels AA and AAA. Everything is calculated in your browser.

This tool needs JavaScript

The calculation runs in your browser with JavaScript. In the meantime, you can find the minimum values that WCAG requires below.

Colours

In hexadecimal, for example #1537A8.

In hexadecimal, for example #FFFFFF.

Result

Contrast ratio

9.79:1

    Sample text at normal size. This is how a paragraph would read with these colours.

    Sample large text

    Border of a field or a button

    What WCAG requires

    Minimum contrast ratios
    WhatLevel AALevel AAA
    Normal text4.5:1 (1.4.3)7:1 (1.4.6)
    Large text3:1 (1.4.3)4.5:1 (1.4.6)
    User interface components and graphics3:1 (1.4.11)No AAA level

    Large text is text of at least 18 points (24 CSS pixels), or at least 14 points in bold (about 18.66 CSS pixels).

    Good to know

    • The ratio goes from 1:1 (no contrast) to 21:1 (black on white). It is calculated from the relative luminance of the two colours.
    • It is not rounded: 4.49:1 does not reach 4.5:1.
    • Contrast is not required for logos, decorative text or disabled controls.
    • Contrast is not everything: information must never rely on colour alone (success criterion 1.4.1).
    • On our website we use our own minimum of 7:1 for body text, which is stricter than WCAG AA.

    Start using SiteNorma

    Create your account and start improving your website’s accessibility. The Free plan includes 10 scanned pages a month, with no card required.

    Create a free account Analyse your website for free