فاحص تباين الألوان
فحص تباين الألوان
تعمل في متصفحك · بلا رفع
الأداة نفسها والتعليمات في هذه الصفحة باللغة الإنجليزية حاليًا. تعمل بالطريقة نفسها: كل شيء يجري في متصفحك.
–
contrast ratio
Large text: The quick brown fox
Normal text: The quick brown fox jumps over the lazy dog. 0123456789
Button outline| Use | WCAG AA | WCAG AAA |
|---|---|---|
| Normal text (below 24 px, or below 18.66 px bold) | ||
| Large text (24 px and up, or 18.66 px bold) | ||
| Icons, borders and form fields | – |
Suggested text colors
The nearest colors with the same hue that pass. Click one to use it.
متصفحك قديم جدًا لتشغيل هذه الأداة. حدِّثه، أو استخدم إصدارًا حديثًا من Chrome أو Edge أو Firefox أو Safari.
- لا شيء يغادر جهازك
- لا حدود للحجم يفرضها الخادم
- بلا تسجيل، بلا علامة مائية
- مجانية
How to check color contrast
- Enter the text color and the background color, or pick them.
- Read the contrast ratio and the pass or fail results for normal text, large text and interface parts.
- If it fails, click a suggested color: the nearest shade that passes.
The WCAG requirements
| Use | AA | AAA |
|---|---|---|
| Normal text | 4.5 : 1 | 7 : 1 |
| Large text (24 px, or 18.66 px bold) | 3 : 1 | 4.5 : 1 |
| Icons, borders, form fields | 3 : 1 | – |
Good to know
- The ratio is calculated with the WCAG 2 formula and compared without rounding, so 4.49 : 1 fails AA.
- See-through text colors are blended with the background first, as browsers draw them.
- Passing the ratio is required but not everything: font weight, size and thin lines also affect readability.
الأسئلة الشائعة
What contrast ratio do I need?
For most text, at least 4.5 : 1 (WCAG AA). Large text needs 3 : 1. AAA asks for 7 : 1.
How are the suggestions made?
The text color keeps its hue and saturation and is made lighter or darker until it reaches the target ratio.
Is this APCA / WCAG 3?
No. It uses WCAG 2.1 and 2.2, which is what most laws and guidelines refer to today.