We've built the semantic base (04-01), the forms (04-02) and the declarative ARIA layer (04-03). What's left is the most visual part of the Perceivable principle, and it's almost all CSS: that text has enough contrast, that information isn't conveyed by color alone, that content can be enlarged up to 200% without breaking, that it flows to narrow screens without horizontal scroll, that it respects text spacing, and that focus is always visible. These are criteria 1.4.3, 1.4.11, 1.4.1, 1.4.4, 1.4.10, 1.4.12 and 2.4.7/2.4.11 that in Module 3 we studied as a requirement and now implement in CSS.

We'll apply it to Cursalia's brand palette —reviewing a color that fails and fixing it— and thinking very much about Sofía, who has low vision and browses with the zoom at 300%.

1. WCAG contrast ratios (1.4.3 and 1.4.11)
2. How to measure contrast
3. Not relying on color alone (1.4.1)
4. Text resizing to 200% and relative units (1.4.4)
5. Reflow to 320 CSS px (1.4.10)
6. Text spacing (1.4.12)
7. Visible focus indicator (2.4.7 / 2.4.11)
8. Reviewing Cursalia's brand palette
9. Common mistakes and tips
10. Exercises
11. Conclusion

Contrast is the difference in luminance between two colors, expressed as a ratio from 1:1 (none) to 21:1 (black on white). WCAG sets minimums at AA level:

Criterion 1.4.11 (non-text contrast) is the one usually forgotten: a form field's border, a card's icon or the line of a progress chart must also stand out from the background by at least 3:1. An input whose only border is a very light gray on white is invisible to Sofía even if its text contrasts well.

You don't estimate it "by eye": you measure it. Common tools (the detail of testing is Module 6):

• Browser DevTools: when you inspect text, the color picker shows the ratio and whether it passes AA/AAA.
• WebAIM Contrast Checker: you paste the two colors and it gives the ratio.
• Extensions like axe DevTools or Lighthouse, which audit the whole page.

The practical rule: every pair (text color, background color) in the palette must be verified. And watch out for text over images or gradients: if the background varies, you must guarantee contrast in the least favorable area (a semi-transparent layer behind the text solves it).

Criterion 1.4.1 requires that no information be conveyed solely by color. Marta (who can't see) and anyone with color blindness would lose that data. You must always add a second channel: text, an icon, a shape or a pattern.

Typical cases in Cursalia:

• Form errors (seen in 04-02): not just a red border → add "Error:" text and an icon.
• Links within a paragraph: if they're only distinguished by color, someone who doesn't perceive that color won't know they're links → underline them or give them another visible cue.
• Course progress chart: if "completed / in progress / locked" is encoded only with green/yellow/gray, add a text label, an icon or a pattern.

Criterion 1.4.4 requires that text can be enlarged up to 200% without losing content or functionality. The number-one cause of failure is setting font sizes in absolute pixels: font-size: 16px doesn't respond well to the user's size preference.

The solution is to use relative units:

• rem: relative to the document's base size (the one the user configures in their browser). Ideal for font sizes.
• em: relative to the parent element's size. Useful for proportional spacing.
• Avoid px for typography and for containers that must grow with the text.

If Sofía raises the base font size to 200%, with rem all the text grows coherently. With px it wouldn't move. Also, don't set rigid heights in px on text containers: a height: 40px on a button causes enlarged text to be cut off; use min-height and let the padding breathe.

Criterion 1.4.10 (Reflow) requires that content can be viewed without scrolling in two dimensions at a width equivalent to 320 CSS px (which happens, for example, when Sofía zooms to 400% on a 1280 px monitor). That is: vertical scroll is fine (normal), but not horizontal. Content must reflow, not spill over.

This is achieved with responsive/fluid design:

minmax(280px, 1fr) with auto-fill makes the catalog cards go from several columns to a single one without anything spilling off the side. Also use @media queries to reorganize the layout at small widths. Criterion exception: content that needs two dimensions (large tables, maps) may require scrolling, but that's the exception, not the norm.

Criterion 1.4.12 requires that, if the user forces certain spacing (to improve readability, something that helps Hugo with dyslexia a lot), content doesn't break or overlap. The values your CSS must support:

The key to meeting it: don't set rigid heights or use overflow: hidden on text containers. If a button or card has a fixed height, increasing the line spacing cuts off the text.

When Lucía tabs with the keyboard, she needs to see where the focus is at all times (criterion 2.4.7, Focus Visible; and 2.4.11 reinforces that the indicator not be covered). The browser draws a default outline... and the classic mistake is removing it for aesthetics:

With that, Lucía is left "blind": she tabs without knowing which control she's on. If by design you want to change the focus style, replace it, never simply remove it. The modern tool is :focus-visible, which shows the ring when navigating with the keyboard but not when clicking with the mouse:

Requirements of the indicator: it must have sufficient contrast (at least 3:1 against its surroundings, in line with 1.4.11), be thick and not be hidden behind other elements. We link with the keyboard criteria 2.4.7/2.4.11; programmatic focus handling when opening dialogs and widgets is Module 5.

Let's put it all into practice with Cursalia's palette. The corporate color is a brand blue used for buttons and links. We audit:

The light brand blue looks nice, but with white text on top it doesn't reach 4.5:1: Sofía can't read it comfortably. The fix doesn't force a change of identity: you darken the blue just enough to comply, reserving the original light tone for decorative backgrounds where there's no text on top.

• Trusting your eye for contrast. Always measure it with a tool; light grays deceive.
• Forgetting non-text contrast (1.4.11). Input borders, icons and chart lines also need 3:1.
• Encoding information with color only. Always add a second channel: text, icon, underline, pattern.
• Typography in px. It prevents scaling; use rem/em and respect the user's base size.
• Fixed heights on text containers. They break resizing (1.4.4) and spacing (1.4.12): use min-height and avoid overflow: hidden.
• Fixed widths that cause horizontal scroll. Design with fluid grids and max-width: 100% to meet reflow (1.4.10).
• outline: none with no replacement. One of the most damaging mistakes for keyboard users. Use :focus-visible with a contrasted ring.
• Tip: test your page with browser zoom at 200% and 400%, and traverse it with the keyboard. If horizontal scroll appears, text is cut off or you lose sight of the focus, you have work to do.

Cursalia's "discount" label uses white text #ffffff on a light orange #ffb066, with a ratio of 1.8:1. Explain why it fails and propose a fix that keeps orange as the color, indicating which additional channel you would add.

Refactor this CSS so the text scales to 200% and the button doesn't cut off the text when enlarged.

A designer put :focus { outline: none; } on the entire student dashboard SPA "because the blue border is ugly". Explain the problem and write an accessible alternative with :focus-visible.

Solution 1. It fails because 1.8:1 is far below the AA minimum of 4.5:1 for normal text (and even below 3:1 for large text): Sofía can't distinguish the text from the background. Fix: darken the orange until you achieve contrast with the text (or put dark text on the light orange), and don't rely on color alone for the label by adding the word "Discount" or an icon:

Solution 2. You replace px with rem, and the fixed height with padding + min-height, removing the overflow: hidden:

Now, when enlarging to 200% or forcing more line spacing (1.4.12), the button grows with the text instead of clipping it.

Solution 3. The problem: outline: none leaves Lucía (and anyone using a keyboard) unable to tell which element has focus, breaking 2.4.7. In a SPA with many controls, it's especially serious. Alternative: a custom, visible and contrasted indicator, only for keyboard navigation:

The aesthetics are preserved (no ring appears when clicking with the mouse) without sacrificing keyboard accessibility.

With this lesson we close Module 4. You've implemented the visual side of "Perceivable" in CSS: contrast ratios 4.5:1 / 3:1 (text and non-text), not relying on color alone, text scalable with relative units up to 200%, reflow without horizontal scroll at 320 CSS px, text spacing that doesn't break the layout, and a visible focus with :focus-visible that is never removed without a replacement. And you've fixed Cursalia's palette so that Sofía, with her zoom at 300%, reads without barriers.

With this we now have a solid, static base: semantic HTML (04-01), accessible forms (04-02), declarative ARIA (04-03) and accessible CSS (04-04). Everything we've done describes what each thing is and how it looks, but we haven't yet given it behavior. That's the leap of Module 5: bringing interactive widgets to life with JavaScript (the filters dropdown, the FAQ accordion), managing the keyboard and focus programmatically, and making multimedia (video and audio) and images accessible with the alt attribute in depth. We move from structure to behavior.