KI prägt schon heute, wie Kunden Produkte entdecken und auswählen. Verstehen Sie, warum KI ein Produkt einem anderen vorzieht. Untersuchen Sie, wie KI Ihre Marke in Kaufentscheidungsszenarien bewertet.

AllswapAllswap

Produkt

ÜberblickSichtbarkeitPrompts

Unternehmen

Unser UnternehmenKontaktKarrierePreiseBlogKostenlose Tools
EnglishDeutschFrançais
Loslegen

Color contrast checker

Brand colours often fail accessibility checks as text: the orange that looks right on a button is unreadable as a link. Enter two colours to see the WCAG ratio and every level it passes, and when it fails, get the closest shade of the same colour that passes.

Preview

Large heading text

Body copy at 16px is held to the stricter AA threshold of 4.5:1. Most of a page is text at this size, so it is the result that matters most.

Small print at 13px is the first to become unreadable.

Outlined buttonFilled button

  • AA · Normal text

    Fail

    Needs 4.5:1. Body text under 24px, or under 18.66px bold.

  • AA · Large text

    Pass

    Needs 3:1. Text from 24px, or 18.66px bold.

  • AAA · Normal text

    Fail

    Needs 7:1. The enhanced level for body text.

  • AAA · Large text

    Fail

    Needs 4.5:1. The enhanced level for large text.

  • AA · UI and graphics

    Pass

    Needs 3:1. Icons, input borders, focus rings and chart marks.

Contrast ratio

3.20:1

Passes for large text and interface elements only.

Suggested text colours

Same hue and saturation, lightness adjusted only as far as needed.

  • #cd4d10

    Nearest for AA (4.5:1) · 4.50:1

  • #a92800

    Nearest for AAA (7:1) · 7.02:1

How the suggestion works

The suggested colour keeps your text colour’s hue and chroma in OKLCH, a perceptual colour space, and changes only its lightness — by the smallest amount that reaches the target ratio. The result reads as the same brand colour, darker or lighter.

Ratios are computed with the WCAG 2.2 relative luminance formula and rounded down for display, so a pair shown as 4.50:1 genuinely passes AA.

Questions

What contrast ratio is required for WCAG AA?

4.5:1 for normal text and 3:1 for large text — 24px and above, or 18.66px bold. User interface components such as input borders and icons need 3:1 against adjacent colours.

What is the difference between AA and AAA?

AA is the level most laws and procurement standards require, including the European Accessibility Act and Section 508. AAA is stricter: 7:1 for normal text and 4.5:1 for large text.

Does grey text on white pass?

Down to #767676, which is 4.54:1 on white. One step lighter, #777777, is 4.48:1 and fails AA for body text.

Is contrast checked differently in dark mode?

The same formula applies to any pair, but colours that pass on white often fail on near-black backgrounds. Check each theme's pairs separately.

Why is my brand colour failing?

Mid-lightness colours — many oranges, yellows, greens and light blues — sit below 4.5:1 against both white and black. Use the suggested darker shade for text and keep the original for large shapes and buttons.

More free tools

View all

Image compressor

Compress JPG, PNG and WebP images in the browser, compare before and after, and download them as a ZIP.

Open tool

Image converter

Convert images between PNG, JPG and WebP, and SVG to PNG at up to 4× scale, in batches.

Open tool

Color palette from image

Extract a colour palette from any image, with HEX, RGB and HSL values and CSS or Tailwind export.

Open tool

Bereit, die KI-Suche zu dominieren?

Jetzt loslegen

Allswap