Rullst AcademyRullst Academy/Lesson
CSS and interface design · Lesson 06 / 12

Color that communicates and stays readable

An attractive combination also needs readable text and more than color alone.

Learning paths14 min

Let's discover together

  1. 1

    Color sets text color and background-color the background. Use variables such as --ink and --surface for consistency. Var(--ink) uses the defined value; changing a variable can affect several components.

  2. 2

    Contrast compares luminances, not color names. For ordinary text, WCAG 1.4.3 uses at least 4.5:1; large text has its own conditions and a 3:1 threshold. Do not round 4.49 up to pass 4.5.

  3. 3

    The workshop meter calculates only the selected opaque pair and the ordinary-text threshold. It does not automatically assess the page, transparency, images, gradients, every state or complete conformance. The displayed number may be rounded; comparison uses the original value.

  4. 4

    Do not convey an error only in red: add text explaining the problem. Links stay underlined in this project. Compare white/black and white/white in the meter, then test your palette and review focus and states manually.

Workshop: one interface, different spaces

Edit <style id="lesson-css"> in “My files and GitHub”. The preview applies that CSS to the supplied HTML structure; check HTML edits in the downloaded file. External resources and CSS outside the study subset are not accepted here.

Go to my code

Measurements describe this preview; they do not guarantee every size or complete accessibility. Test long content, zoom, keyboard and assistive technologies in the local project.

Two-color contrast lab

Approximate ratio ·

Calculation only for two opaque sRGB colors selected here; it does not read your page. The threshold uses the unrounded ratio. It does not assess transparency, gradients, images, states or complete conformance.

Official links and next step

✦
YOUR MISSION

Compare contrast of two opaque colors and recognize its limits.

Now it's your turn

Discovery workshop

Predict, change, compare

Pair A has 4.49:1 and pair B 4.60:1, for ordinary opaque text.
Build your answers and check when you are ready.
A moment to understand

Does the meter approve all page accessibility?

I need a hint

Check the rule, condition and observed result before concluding.

Loading your journey…

Take it with you

Choose a palette and record both colors, ratio and decision without rounding the threshold. Add a non-color cue to a state.

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Rullstpetbot

AI can make mistakes. Check the lesson material.