Which colour contrast does WCAG require?

For level AA, the usual requirement, normal text needs at least 4.5 : 1 and large text at least 3 : 1. UI components and meaningful graphics need 3 : 1 against their surroundings. The stricter level AAA asks for 7 : 1 for normal and 4.5 : 1 for large text.

What counts as large text?

From 24 pixels (18 points), or from about 18.66 pixels (14 points) when bold. Everything below counts as normal text, including most menus and buttons.

Does my website have to meet AA or AAA?

Laws and standards such as the European Accessibility Act and EN 301 549 refer to level AA. AAA is rarely achievable for whole websites and is not required; for body text it is still worth it if the design allows.

How does the tool find the suggested colour?

It changes only the brightness of your colour and keeps hue and saturation. Your blue stays a blue, just a little darker or lighter, exactly as far as the chosen level needs. If no such colour exists, the tool says so.

Why does the tool show 4.49 instead of 4.5?

Because WCAG compares the exact value: 4.49 : 1 does not pass AA, even if it looks like 4.5 when rounded. We therefore never round up, so the number and the result agree.

Are my colours stored or sent anywhere?

No. The calculation runs entirely in your browser. Your colours never leave your device and we do not see them.

Check colour contrast

Enter a text and a background colour. You see at once whether the pair is readable enough under WCAG 2.2, and which colour comes closest if it is not.

Text colour

Background

Large text from 24 px

Normal text: this is how body copy reads in this colour pair, like a paragraph on your website.

UI component

Contrast ratio

3.05 : 1

Enough only for large text and UI components. Body text needs at least 4.5 : 1; below is the nearest colour that gets there.

Normal text · AA· Fail

min. 4.50 : 1

Body copy, menus, labels and most buttons.

Normal text · AAA· Fail

min. 7.00 : 1

The strict level, e.g. for long texts and older readers.

Large text · AA· Pass

min. 3.00 : 1

From 24 px, bold from 18.66 px: headings and large buttons.

Large text · AAA· Fail

min. 4.50 : 1

The strict level for headings.

UI components · AA· Pass

min. 3.00 : 1

Input borders, icons, focus rings (WCAG 1.4.11).

Nearest colour that passes

Same hue, just lighter or darker, exactly as far as needed.

Adjust text colour

AA#6b778d4.51 : 1
AAA#50596a7.05 : 1

Adjust background

AA#2d2d2d4.50 : 1
AAAnot reachable against this colour

Your input never leaves your device: the tool runs entirely in your browser. We neither see nor store any of it.

What contrast tells you

What is measured?

The contrast ratio compares how bright two colours appear to the eye. 1 : 1 means no difference at all, 21 : 1 is black on white. Hue does not matter, only brightness.

Why it matters

Many people struggle with low contrast: with poor eyesight, with age, on a phone in the sun. WCAG is the basis of accessibility law across the EU, and Google counts readability as page quality.

How to read the result

AA is the target for every website: 4.5 : 1 for normal text, 3 : 1 for large text and for UI components such as input borders. AAA is the stricter level. If a check fails, simply apply the suggested colour.

Frequently asked questions

More tools

Marketing & ConversionUTM link builderBuilds campaign links for Google Analytics 4, with presets for Meta, Google Ads, newsletters and flyers.

All tools at a glance

export async function findFreeSlots(day: Date, rules: Availability[]) {
  const windows = rules.filter((rule) => rule.weekday === getDay(day));
  const booked = await prisma.booking.findMany({
    where: { startsAt: { gte: startOfDay(day), lt: endOfDay(day) } },
    select: { startsAt: true, endsAt: true },
  });

  return windows.flatMap((window) =>
    slotsWithin(window, day).filter(
      (slot) => !booked.some((b) => overlaps(slot, b)) && isInFuture(slot)
    )
  );
}

export function overlaps(a: Slot, b: Slot): boolean {
  return a.startsAt < b.endsAt && b.startsAt < a.endsAt;
}

export async function reserve(slot: Slot, lead: Lead) {
  const booking = await prisma.booking.create({
    data: { ...slot, leadId: lead.id, meetingUrl: await createRoom(lead) },
  });
  await sendBookingMail({ to: lead.email, booking });
  return ok(booking);
}

What eats most of your time?

Enquiries, appointments, order confirmations or invoices: in 30 minutes you know what is worth it for you. No obligation, no sales pressure.

Book a free intro call Start WhatsApp chat