BBuildQuill
أدوات الألوان

مدقّق تباين الألوان

Check WCAG AA and AAA contrast ratios between any two colors to ensure your design is accessible.

The quick brown fox jumps over the lazy dog

Normal body text at 16px - sample preview

Small text (12px) - harder to read at low contrast

Contrast Ratio

14.63:1

Pass

AA Normal Text

min 4.5:1

Pass

AA Large Text

min 3:1

Pass

AAA Normal Text

min 7:1

Pass

AAA Large Text

min 4.5:1

Common Presets

كيفية استخدام مدقّق تباين الألوان

1

Pick foreground and background colors

Use the color pickers or enter hex codes for your text color and background color.

2

Read the contrast ratio

The contrast ratio is calculated instantly and compared against WCAG AA and AAA standards.

3

Check the pass/fail results

See which WCAG levels pass for normal text, large text, and UI components.

What is the Color Contrast Checker?

Color contrast is the difference in brightness between text and its background. If the contrast is too low, text becomes hard to read, especially for people with low vision. This checker measures the contrast ratio between two colors and tells you whether it meets the WCAG accessibility standards at the AA and AAA levels.

Pick a text color and a background color, and the tool shows the exact ratio along with pass or fail results for normal and large text. It helps you choose combinations that are comfortable to read and compliant with accessibility guidelines.

  • Calculate the exact contrast ratio between two colors
  • Pass or fail results for WCAG AA and AAA
  • Separate checks for normal and large text
  • Live preview of text on the chosen background
  • Accepts HEX color values
  • Runs in your browser, no signup needed

What the WCAG levels require

WCAG sets minimum contrast ratios. For normal text, AA requires at least 4.5 to 1 and AAA requires 7 to 1. For large text, which is roughly 18.66px bold or 24px regular and up, AA requires 3 to 1 and AAA requires 4.5 to 1. The checker compares your ratio against each threshold so you know exactly which level you meet.

Why contrast matters

Good contrast makes content readable for everyone, including people with low vision, color vision deficiency, or anyone using a screen in bright sunlight. It is also a legal and best-practice requirement for many websites. Meeting at least AA is a common baseline, with AAA reserved for content that needs the highest readability.

How to fix a failing combination

If a pair fails, increase the difference in lightness rather than just changing the hue, because contrast depends mostly on brightness. Darkening the text or lightening the background usually helps fastest. For large headings you have more room, since the large-text thresholds are lower than for body copy.

الأسئلة الشائعة

What is a good contrast ratio?
For normal text, aim for at least 4.5 to 1 to meet WCAG AA, or 7 to 1 for AAA. Large text needs 3 to 1 for AA and 4.5 to 1 for AAA.
What counts as large text?
Large text is roughly 24px and up for regular weight, or about 18.66px and up for bold. It has lower contrast requirements because larger letters are easier to read.
Why does my color pair fail?
Contrast depends mostly on brightness, so two colors with similar lightness fail even if their hues differ. Darken the text or lighten the background to increase the ratio.
Which level should I target?
AA is the common baseline for most websites. Target AAA for content that needs maximum readability, such as long-form reading or interfaces used by people with low vision.
Does this check work with any color?
Yes. Enter HEX values for the text and background, and the tool calculates the ratio and shows pass or fail for each WCAG level.

أدوات ذات صلة

مولّد لوحات الألوان

Generate harmonious color palettes from any base color. Complementary, triadic, analogous, and more.

منتقي الألوان

Pick colors visually and get HEX, RGB, and HSL values with a palette generator.

مدقّق الفروقات

Compare two texts and highlight added, removed, and unchanged lines instantly.

تحويل HEX إلى RGB

Convert HEX color codes to RGB values.

درجة سهولة القراءة

Analyze text readability with Flesch Reading Ease, Flesch-Kincaid Grade Level, and Gunning Fog Index.

تحويل RGB إلى HEX

Convert RGB color values to HEX codes.