Skip to content
Get started

Colour contrast check

Do4U checks the contrast of your brand and website colours. You enter your colours, one per line, and say what each colour is for: text, background, accent (for example a button) or border. The code computes the contrast ratio of every pair with the WCAG formula and shows which levels it reaches: AA and AAA for normal and large text, and 3:1 for borders, icons and button areas. The values are not rounded up. For every pair that fails you get the nearest colour that passes, once darker and once lighter, in the same hue. Do4U also builds an adjusted palette and checks it again as a whole. You export the palette as CSS custom properties, SCSS variables or JSON, and the export is made in your browser. Everything runs in code, without AI, and it is free.

Try it now Pricing

Free and without an account: Contrast ratio calculator →

Who it is for

For designers, developers, agencies and website owners who choose brand colours or build a style guide and want text and buttons that everyone can read.

Typical uses

  • Check a new brand palette before the design starts
  • Find a grey for secondary text that still passes AA
  • Check button, link and border colours against the page background
  • Export the adjusted colours as CSS variables for your style sheet

Example

Input

#1a1a1a text #777777 text Secondary #ffffff background #cccccc border

Result

#1a1a1a on #ffffff: 17.4:1, passes AA and AAA #777777 on #ffffff: 4.47:1, fails AA for normal text (passes for large text). Darker: #767676 → 4.54:1. Lighter: not possible #cccccc on #ffffff: 1.6:1, fails the non-text contrast of 3:1. Darker: #949494 → 3.03:1 Export (adjusted): :root { --color-text: #1a1a1a; --secondary: #767676; --color-background: #ffffff; --color-border: #949494; }

A fixed example, shortened. Real results are AI-generated: please check them.

Price and limits

Price
free, up to 30 checks per day
Available with
Free, With package
Input limit
Up to 3,000 characters per file

Privacy

Processed on our own servers in the EU (Poland). Inputs and results are deleted after 7 days (Free) or 30 days (packages), or right after you see the result if you choose not to store them. Images are deleted right after processing.

In the API

Tool name: contrast_check. Create a job with POST /api/v1/jobs and fetch the result with GET /api/v1/jobs/{id}. You find your API key in your account.

curl -X POST https://do4u.eu/api/v1/jobs \
  -H "Authorization: Bearer d4u_…" -H "Content-Type: application/json" \
  -d '{"tool": "contrast_check", "colors": ["#1a1a1a text", "#ffffff background", "#0066cc accent"]}'

Full API documentation →

Questions and answers

How is the contrast ratio computed?

With the formula of WCAG 2.2: first the relative luminance of each colour, then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. The result is between 1:1 and 21:1. The values are compared without rounding, so 4.49:1 does not reach 4.5:1, and the display never rounds up.

Which pairs are checked?

Text is checked on every background and on accent colours, against 4.5:1 and 7:1 for normal text and 3:1 and 4.5:1 for large text. Accent and border colours are checked on the background against 3:1 for non-text contrast. A colour without a role is compared with all other colours.

How are the suggested colours found?

Only the lightness changes, in the OKLCH colour space; the hue stays the same. Do4U looks for the nearest colour that passes, once darker and once lighter, and checks it again as a hex code. If no colour can pass against a background, it says so.

Is my text stored?

Only as long as needed: 7 days on Free, 30 days with a package – or not at all if you choose not to store it. Processing happens on our own servers in the EU (Poland).

Can I use the result right away?

Results are AI-generated. Please read them before you publish or send them.

Related tools

  • Accessibility check

    Checks a page for common barriers and explains how to fix them.

  • Design feedback from a screenshot

    Upload a screenshot of a page or app and get numbered, concrete findings on button size, contrast, text in images, hierarchy and spacing, each with a frame on the image. An AI assessment, not a measurement.

  • Alt texts

    Short image descriptions for screen readers and search engines.

All tools →