Color Contrast Checker

Free, no signup. Compare foreground and background colors against WCAG 2.2 AA and AAA, get the closest practical hex alternatives that pass, or check a live URL's real rendered contrast.

Built by Patrick Stox

Foreground Background

The quick brown fox jumps over the lazy dog.Large text and UI components use the lower 3:1 AA threshold.

Runs entirely in your browser — nothing you paste is uploaded or stored. Anonymous run-level outcome counters may be used for aggregate research; URLs, domains, IPs, and identifiers are never included, and no statistic is released below 100 runs.

Feedback

Palette audit

Paste CSS variables, token declarations, or a hex list. The matrix checks every color as text against every other color as a background.

Check

Example

Example data — engine-verified result

#777777 foreground on #FFFFFF: 4.48:1

Pass: AA large text and UI (3:1).
Below: AA normal text and AAA large text (4.5:1), plus AAA normal text (7:1).
Nearest AA normal-text alternative: #767676, one step darker, at 4.54:1.

How it works

Paste mode calculates contrast from the WCAG relative-luminance formula, not by simply comparing RGB values. The suggestions preserve the foreground hue and saturation while walking its lightness toward the nearest passing color, then verify the rounded hex result. The URL mode above instead loads the page in a metered headless browser and reads each element's actual computed color and background after the CSS cascade resolves — the only way to catch contrast failures caused by inherited color, semi-transparent backgrounds, CSS variables, or the browser's default stylesheet, none of which a pasted color list can see.

Use the right rule

Normal-size text needs 4.5:1 for AA. Large text (at least 24px regular or 18.66px bold) and non-text UI indicators need 3:1. Color should never be the only way to communicate a state.

Frequently asked questions

What contrast ratio do I need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text and non-text UI components. AAA requires 7:1 for normal text and 4.5:1 for large text.

Does this prove my page is accessible?

No. It checks color pairs, not typography, focus states, images of text, or (in paste mode) real rendered backgrounds. Treat it as a design-time check and test the finished interface too.

Where does my palette go?

In paste mode it stays in the browser — paste CSS custom properties, Tailwind-style name/value tokens, or a loose list of hex colors. Only the URL mode sends anything to our server, and that is the public page address you enter, not a palette.

How is the URL mode different from pasting colors?

Pasted colors give you exact math on the pair you type. The URL mode loads the real page in a metered headless browser and reads each element's actual computed color and background after the CSS cascade, inheritance, opacity, and browser defaults are resolved — the only way to get a genuine contrast verdict for a live page, since a static-HTML color guess can be wrong.

Feature requests for Color Contrast Checker

Upvote what you want most. New ideas can be submitted from the floating Feedback menu; requests appear here once approved, and the most-wanted rise to the top.

Loading…

➕ Request a feature

New requests are reviewed before they appear here.

حول الأداة

تحقّق WCAG 2.2 تباين الألوان, العثور الأقرب اجتياز لون المقدمة ألوان, و تدقيق CSS لون رموز في الخاص بك متصفح.

مجاني, من دون تسجيل. قارن لون المقدمة و الخلفية ألوان مقابل WCAG 2.2 AA و AAA, احصل ال الأقرب عملي hex بدائل ذلك اجتياز, أو تحقّق واحد حي عنوان عنوان URL فعلي معروض contrast.

الميزات

WCAG 2.2 AA و AAA contrast تحقّقات من أجل لون المقدمة/background أزواج.
الأقرب عملي اجتياز لون المقدمة-color اقتراحات.
حي عنوان URL تدقيق في واحد مقاس متصفح بلا واجهة استخدام الأنماط المحسوبة.
محلي CSS-variable و لوحة ألوان تدقيق مع واحد exportable مصفوفة.

كيفية العمل

لصق وضع يحسب contrast من ال WCAG صيغة الإضاءة النسبية, ليس بواسطة ببساطة المقارنة RGB قيم. ال اقتراحات حافظ على ال لون المقدمة hue و saturation بينما walking الخاص به lightness نحو ال الأقرب اجتياز لون, ثم تحقّق ال مقرّب hex نتيجة. عنوان URL وضع يحمّل ال صفحة في واحد مقاس متصفح بلا واجهة و يقرأ كل element’s فعلي محسوب لون و الخلفية بعد ال CSS تتابع يحلّ — ال فقط way إلى يلتقط إخفاقات سبّب بواسطة inherited لون, semi-transparent backgrounds, CSS متغيرات, أو ال browser’s افتراضي ورقة أنماط. Normal-size نص يحتاج 4.5:1 من أجل AA; كبير نص و non-text UI indicators يحتاج 3:1. لون ينبغي أبدًا يكون ال فقط way إلى communicate واحد حالة.

القيود

هذا الأداة تحقّقات لون أزواج, ليس typography, تركيز حالات, صور من نص, أو (في لصق وضع) فعلي معروض backgrounds. يعالج إنه باعتباره واحد design-time تحقّق و اختبار ال مكتمل واجهة أيضًا.

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

ما contrast نسبة يفعل I يحتاج?

WCAG AA يتطلب 4.5:1 من أجل عادي نص و 3:1 من أجل كبير نص و non-text UI مكوّنات. AAA يتطلب 7:1 من أجل عادي نص و 4.5:1 من أجل كبير نص.

يفعل هذا يثبت my صفحة هو accessible?

لا. إنه تحقّقات لون أزواج, ليس typography, تركيز حالات, صور من نص, أو (في لصق وضع) فعلي معروض backgrounds. يعالج إنه باعتباره واحد design-time تحقّق و اختبار ال مكتمل واجهة أيضًا.

حيث يفعل my لوحة ألوان go?

في لصق وضع إنه يبقى في ال متصفح — لصق CSS مخصص خصائص, Tailwind-style اسم/قيمة رموز, أو واحد مرن قائمة من hex ألوان. فقط ال عنوان URL وضع يرسل أي شيء إلى الخاص بنا خادم, و ذلك هو ال عام صفحة address أنت أدخل, ليس واحد لوحة ألوان.

كيف هو ال عنوان URL وضع مختلف من pasting ألوان?

ملصق ألوان يعطي أنت دقيق رياضيات على ال زوج أنت اكتب. ال عنوان URL وضع يحمّل ال فعلي صفحة في واحد مقاس متصفح بلا واجهة و يقرأ كل element’s فعلي محسوب لون و الخلفية بعد ال CSS تتابع, inheritance, opacity, و متصفح الإعدادات الافتراضية هي محلول — ال فقط way إلى احصل واحد حقيقي contrast حكم من أجل واحد حي صفحة, منذ واحد static-HTML لون يخمّن يمكن يكون خاطئ.