CSS Module 6
Colour and theming interview questions
12 interview questions on colour and theming from CSS: short warm-ups, then what each harder question tests, the first step of a good answer and its follow-ups.
Warm-up questions
Short questions with short answers, each answered in full.
-
Fresher
What is the difference between
rgb(0 68 204 / 50%)andrgba(0, 68, 204, 0.5)?Answered in the lesson Colour syntax: hex, rgb(), hsl() and keywords
-
Fresher
What do the three numbers in
oklch(0.55 0.15 262)mean, and why use OKLCH instead of HSL for a palette? -
Fresher
What does
color-mix(in oklab, var(--brand), black 15%)produce, and why name the colour space?Answered in the lesson color-mix(), relative colour and contrast-color()
-
Fresher
What does
color-scheme: light darkon the root element do?Answered in the lesson Dark mode, colour schemes and forced colours
Questions with model answers
What each question tests, the first step of a good answer and the follow-ups to expect.
-
Fresher to mid
The brand orange, #f26b1d, must stay the main button colour, but white 16 px labels on it fail WCAG 2.2 AA, and the product team won't change the orange. What are your options, and what are the numbers for each?
- What it tests
- Applying the WCAG 2.2 text and large-text thresholds with real ratios, and finding fixes that keep a brand colour.
- First step
- Measure before you choose: white on #f26b1d is 3.05:1, which passes only the 3:1 target for large text, 24 px or about 18.5 px bold. A 16 px label needs 4.5:1. Then list the levers that keep the orange: the label's colour, the label's size, and which surfaces carry the orange.
- Follow-ups
-
- Does an 18 px semibold label count as large text?
- The hover state darkens the orange. What changes for the label?
- What contrast does the button's focus indicator need?
From the lesson Colour syntax: hex, rgb(), hsl() and keywords
Model answer, Pro. Model answers open with any pass; prices are in the notice on this page.Opening the model answers with your pass…
Model answers open with any MySmartCoPilot pass.
- Pro pass · 1 week₹79$2.99
- 30 days₹179$5.99
- 1 year₹1,699$45
One payment; nothing renews unless you choose to. The price shown is the total you pay: no fees or charges are added at checkout.
Passes can’t be bought right now, so the model answers can’t be opened at the moment. If you have a pass, enter your licence key.
It also opens every other in-depth part in Learn and every Pro tool. Sales are final, except where the law gives you a right to withdraw, for example in the EU and the UK (refund policy).
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
-
Fresher to mid
An input's placeholder uses rgb(0 0 0 / 40%) on a white field, and the designer says it is black, so it passes. Does it meet WCAG 2.2? Show the calculation and give a value that passes.
- What it tests
- Compositing a translucent colour before measuring contrast, the WCAG luminance formula, and which rule applies to placeholder text.
- First step
- Composite first, because the reader sees the blend: 40% black over white is 0.6 × 255 = 153, the gray #999999. Its relative luminance is about 0.318, so the ratio is 1.05 ÷ (0.318 + 0.05) ≈ 2.85:1. Placeholder text is text, so it needs 4.5:1.
- Follow-ups
-
- The same input moves onto a light gray card, #f2f2f2. What changes?
- How would you test translucent text colours automatically?
- Would opacity on the placeholder be any different?
From the lesson Colour syntax: hex, rgb(), hsl() and keywords
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 2 minutes
-
Mid to senior
A design system built its colour scales by changing HSL lightness in 10% steps. Teams complain that white text on step 50% is readable on the blue scale but not on the green or yellow ones. How would you rebuild the scales, and what rule would you give teams?
- What it tests
- Perceptual lightness, OKLCH scales, contrast rules that hold across hues, and the gamut limits at the ends of a scale.
- First step
- Measure one step per hue: at HSL lightness 50%, white text reaches 5.62:1 on the blue and only 1.51:1 on the green, because HSL lightness ignores how bright each hue looks. Rebuild the scales on OKLCH lightness, where one lightness gives nearly the same contrast for every hue, and give teams a rule by lightness.
- Follow-ups
-
- How do you keep the lightest and darkest steps inside sRGB?
- Can one step guarantee 4.5:1 with white text for every hue?
- How do you migrate the existing hex tokens without moving the brand colours?
From the lesson OKLCH, Oklab and wide-gamut colour
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
-
Mid to senior
Marketing wants a vivid Display P3 green for the main Buy button, but many visitors use sRGB laptops. How do you ship it so that both groups get a good, accessible button?
- What it tests
- color(display-p3), what sRGB screens do with colours outside their gamut, the color-gamut query, and contrast checks for every colour a visitor can see.
- First step
- Find out what sRGB screens would show. color(display-p3 0 0.75 0.4) is outside sRGB, and Chromium, Firefox and WebKit clipped it to #00c35b, lighter and shifted towards yellow. So choose the sRGB colour yourself, and switch a token with @media (color-gamut: p3).
- Follow-ups
-
- Which label colour works on both greens?
- Would @supports (color: color(display-p3 0 0 0)) help?
- How do you test the P3 branch without a P3 screen?
From the lesson OKLCH, Oklab and wide-gamut colour
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 2 minutes
-
Mid to senior
A design system derives hover and pressed states from one --brand token with color-mix(). A customer's orange brand makes the pressed button unreadable, while blue brands look fine. Diagnose it, and change the system so any brand colour works.
- What it tests
- Derived colours against fixed label colours, checking the contrast of every state, and designing tokens that adapt to the brand.
- First step
- Check each state against its label. The orange #f26b1d carries a dark label at 5.72:1, but mixing in 30% black in oklab gives #963f0e, where that label falls to 2.50:1. Darkening helps white text and hurts dark text, so the label has to follow the state instead of the brand.
- Follow-ups
-
- How do you pick the label colour per state without JavaScript?
- Why mix in oklab rather than srgb?
- How would you test every brand colour a customer might enter?
From the lesson color-mix(), relative colour and contrast-color()
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
-
Mid to senior
Tokens live on :root: --brand, and --brand-dark set to color-mix(in oklab, var(--brand), black 30%). A partner theme sets --brand to green on .partner, yet borders that use --brand-dark stay dark blue. Explain why, and fix it without repeating every derived token in every theme.
- What it tests
- How custom properties substitute var() and inherit, and a token architecture that lets themes override base colours.
- First step
- A custom property substitutes its var() references where it is declared. --brand-dark is built on :root from the blue --brand, and .partner inherits that finished value, so overriding --brand there changes nothing that was already built. In Chromium, Firefox and WebKit the partner's border stayed dark blue.
- Follow-ups
-
- Would registering --brand-dark with @property fix it?
- Where should derived tokens be declared in a design system?
- How do you catch this bug in automated tests?
From the lesson color-mix(), relative colour and contrast-color()
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 2 minutes
-
Mid to senior
After dark mode was added with @media (prefers-color-scheme: dark) rules, users report a white flash on load and white inputs on dark pages, and a new theme menu recolours the page but not the native controls. Explain each symptom and fix them.
- What it tests
- color-scheme and its meta element, the used colour scheme, light-dark(), and how a theme switch interacts with media queries.
- First step
- All three come from one gap: the page never declares color-scheme. Without it the used scheme stays light, so the canvas paints white before the CSS loads and form controls stay light. And media queries ignore the menu, because prefers-color-scheme reports only the system setting.
- Follow-ups
-
- Where should a saved theme choice be applied to avoid the flash?
- What does color-scheme: only light do?
- How do you keep embedded third-party frames readable?
From the lesson Dark mode, colour schemes and forced colours
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
-
Mid to senior
A monitoring dashboard shows service health with green and red chips and draws keyboard focus with box-shadow. In Windows contrast themes users can't tell the services apart or see where focus is. What do you change, and how do you test it?
- What it tests
- What forced colours mode replaces and removes, WCAG 2.2's use of colour and focus visibility, system colours, and testing the mode.
- First step
- Forced colours mode gives every chip the same system background and computes box-shadow to none, so both cues vanish. Add a cue that is not colour to each status, such as its name, an icon or a border style, and draw focus with an outline, which survives with a system colour.
- Follow-ups
-
- When is forced-color-adjust: none acceptable?
- Which system colours would you use for a selected row?
- How do you automate the check?
From the lesson Dark mode, colour schemes and forced colours
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 2 minutes