shaleit.tech

Contrast checker

Pick a text colour and a background colour, and we will tell you if people can read it.

You can type a code like #1d2220 or #fff, a name like navy, or rgb(30, 34, 32).

The quick brown fox jumps over the lazy dog.

This is smaller text, the kind you read in a paragraph. Can you read it easily?

    How to use it

    1. Enter the text colour and the background colour.
    2. Read the verdict for normal text and large text.
    3. If it fails, press Fix it for me to get the closest colour that passes.
    4. Copy the new colour code into your design.

    Questions people ask

    What contrast ratio do I need?

    For the WCAG 2.2 level AA standard, normal text needs a contrast ratio of at least 4.5 to 1. Large text, and parts of the page such as icons and button borders, need at least 3 to 1. The stricter level AAA asks for 7 to 1 on normal text.

    What counts as large text?

    WCAG treats text as large when it is at least 24 pixels (18 points) in regular weight, or at least about 18.7 pixels (14 points) in bold. Anything smaller counts as normal text and needs the higher 4.5 to 1 ratio, so body copy almost always falls into that group.

    What is a contrast ratio?

    A contrast ratio is a number from 1 to 1 to 21 to 1 that compares how bright two colours are. Identical colours score 1 to 1, and black on white scores 21 to 1. The higher the number, the easier the text is to read, especially for people with low vision.

    Is grey text on white good enough?

    Only if the grey is dark enough. The lightest grey that passes 4.5 to 1 on a white background is #767676. Anything lighter, which is common for hint text and captions, fails for normal text. Type your colours in this checker to see the exact ratio.