🎨

Check Colour Contrast for Accessibility

Convert colours to get RGB values for use in contrast ratio tools — WCAG compliance for accessible design.

Кіруді қажет етпейді

Accepts: HEX (#fff or #ffffff), RGB (255, 255, 255), or HSL (360, 100%, 50%)

Presets:
HEX#14B8A6
RGBrgb(20, 184, 166)
HSLhsl(173, 80%, 40%)
HSVhsv(173, 89%, 72%)
CMYKcmyk(89%, 0%, 10%, 28%)
CSS RGB20, 184, 166

Lightness scale

Click any swatch to switch to that shade

Accessibility tips

WCAG 2.1 requires 4.5:1 contrast between text and background (AA), or 7:1 for enhanced (AAA) accessibility.

💡

Get the RGB values for both your text and background colours here, then paste them into a contrast checker like WebAIM's Contrast Checker.

🎨

Use the lightness scale to find a shade of your brand colour that passes contrast requirements while staying on-brand.

🔍

Teal and mid-range colours often fail contrast checks against white. Try L=30–40% in HSL for dark enough versions that pass 4.5:1.

Қалай жұмыс істейді

1
Енгізіңіз
Enter your data into the tool above. Everything stays local to your browser.
2
Өңдеңіз
The tool processes your data instantly in your browser using JavaScript. No server, no waiting.
3
Жүктеп алыңыз
Get your result instantly. Nothing is stored after you leave the page — complete privacy.

Неліктен біздікін пайдалану керек?

Мүлдем тегін — ешқашан жасырын шығындар жоқ
Тіркелгі, электрондық пошта немесе кіру қажет емес
Файлдар ешқашан құрылғыңызды тастамайды
Файл өлшеміне мүлдем шектеулер жоқ
Ешқандай шығыста су таңбасы жоқ

Also check out…

Жиі қойылатын сұрақтар