Lesson 9 / الدرس 9
Contrast is a number, not an opinion / التباين رقم لا رأي
Whether text can be read is measurable, and the measurement takes ten seconds. This is the one place in design where you can be objectively wrong, and where being wrong excludes real people from using what you built.
إمكان قراءة النص قابل للقياس، والقياس يستغرق عشر ثوانٍ. وهذا هو الموضع الوحيد في التصميم الذي تستطيع أن تكون فيه مخطئًا موضوعيًا، وحيث يُقصي الخطأ أناسًا حقيقيين عن استخدام ما بنيت.
Light grey text on white looks refined on a good screen in a bright room to someone with good eyesight. On a phone outdoors, or at forty-five, or with any of the ordinary vision differences a large minority of people have, it is unreadable. The difference between those two experiences is a ratio you can calculate, and the whole industry has agreed on the numbers.
The numbers, and what they cover
| Element | Minimum ratio | Note |
|---|---|---|
| Body text | 4.5 : 1 | The one that matters most, and is broken most often |
| Large text — 24px, or 19px bold | 3 : 1 | Bigger letters carry more of their own contrast |
| Borders of controls, icons that carry meaning | 3 : 1 | A button you cannot find is a button that does not work |
| Decorative shapes, disabled controls | no requirement | Nothing is being read |
These are the WCAG AA levels, and they are a floor rather than a target. Text that only just clears 4.5 is legal and still tiring; 7:1 is where reading stops costing effort.
<div style="font-family:system-ui; background:#fff; padding:12px">
<p style="color:#adadad">#adadad on white — 2.3:1. Fails. Looks fine to me.</p>
<p style="color:#949494">#949494 on white — 3.0:1. Still fails for body text.</p>
<p style="color:#767676">#767676 on white — 4.5:1. The legal minimum.</p>
<p style="color:#595959">#595959 on white — 7.0:1. Comfortable.</p>
<p style="color:#1a1a1a">#1a1a1a on white — 17:1. Body text.</p>
</div>Placeholder text is not a label
Two failures are so common they are worth naming. Grey placeholder text used instead of a label fails contrast and then disappears the moment someone types, so they can no longer see what the field was for. Text over a photograph has no fixed ratio at all — it changes with the image, so it must have a solid or heavily darkened layer behind it rather than a hopeful shadow.
Try it live / جرّب بنفسك
Check yourself / اختبر نفسك
1. What is the minimum contrast ratio for body text?
4.5:1 is the AA floor for normal-size text. Large text is allowed 3:1 because the letterforms are thicker, and 7:1 is where reading stops costing effort rather than merely being possible.
2. Why is the person choosing a text colour the worst judge of whether it is readable?
Knowing the words is the decisive advantage — you can read text you cannot actually see. That is why the ratio exists: it removes a judgement nobody is positioned to make about their own work.
3. Why does a palette that passes on a light theme need re-checking on a dark one?
Contrast is a relationship between two colours, so changing the background changes every ratio in the palette. A mid-tone comfortable on white can fall below the floor on near-black without anyone noticing.
Score / النتيجة: 0 / 3
Your task / مهمتك
Take any page and measure the contrast of its body text, its muted text, its links and one button — in both themes if it has two. Report the ratios, mark the failures, and fix them.
خذ أي صفحة وقس تباين نص متنها ونصها الخافت وروابطها وزرّ واحد — في السمتين إن كان لها اثنتان. وبلّغ بالنسب، وعلّم الراسب، وأصلحه.
- At least four pairs measured, with the ratio written next to each أربعة أزواج على الأقل مقيسة، والنسبة مكتوبة بجوار كل واحد
- Every failure named, with the corrected value beside it كل رسوب مذكور، والقيمة المصححة بجواره
- A note on which pairs you could not judge by eye before measuring ملاحظة عن الأزواج التي لم تستطع الحكم عليها بالعين قبل القياس