Chapter 11: Color and contrast

Introduction

The introduction frames implementing a designer’s mockup as translating a specific design into reusable CSS while respecting its design intent.

• Mockup to reusable CSS: Explain why converting a designer’s mockup into HTML and CSS may require more than copying its appearance.
  Why it matters: It helps you build a site that follows the design without making its CSS useful only for one page.
• Continuing the design vision: Explain why a developer benefits from understanding the designer’s concerns even after the initial mockup is implemented, and why basic design principles also matter when no designer is involved.
  Why it matters: Understanding the reasons behind design choices helps you extend a site consistently or make those choices yourself.

Key terms: mockup, HTML and CSS, reuse, designer’s concerns, spacing, colors, typography, design principles

11.1 Communicating with contrast

This section explains how designers use consistent visual patterns and deliberate contrast to guide attention toward a page’s most important content.

• Contrast and information hierarchy: Explain how contrast draws attention to important content and creates a hierarchy of information across a page.
  Why it matters: Contrast helps readers notice what the page is primarily asking them to see or do.
• Consistent patterns before exceptions: Explain why a page needs consistent patterns before a visual exception can draw attention, and how reusable styles support those patterns.
  Why it matters: Consistent elements make intentional differences more noticeable.
• Visual means of contrast: Describe how color, whitespace, and size can make an element stand out, including how these effects can be combined.
  Why it matters: These are practical ways to make the intended focal point visible.

Key terms: contrast, hierarchy of information importance, patterns, modular CSS, reuse of styles, color, spacing, size, whitespace

11.1.1 Establishing patterns

This section shows how repeated design details establish a visual pattern that should remain consistent when a mockup is implemented and the site evolves.

• Consistent visual patterns: Explain how recurring measurements and details create a cohesive design, and why implementing a mockup also means preserving those patterns as the site changes.
  Why it matters: Recognizing repeated details helps you keep a site visually coherent beyond the first mockup.

Key terms: visual pattern, mockup, designer’s vision

11.1.2 Implementing the design

This subsection sets up the page and stylesheet for the chapter’s design and explains how its BEM-style class names identify module parts and variants.

• Page and stylesheet setup: Describe the initial setup: create a new page, link it to a new stylesheet, and copy the markup from Listing 11.1.
  Why it matters: That page and stylesheet provide the starting point for styling the design.
• BEM-style module class names: Explain what the double underscores and double hyphens communicate in the page’s BEM-style class names.
  Why it matters: The names help you recognize how elements in the markup relate to the design’s modules.

Key terms: page, stylesheet, markup, BEM-style notation, module, subelements, variants

11.2 Defining color

This section shows how to turn a designer’s color palette into reusable CSS colors while roughly styling the page and using contrast to guide attention.

• Palette colors as variables: Explain how a designer’s palette supplies named colors for the site and why those colors are assigned to CSS custom properties.
  Why it matters: Reusable palette variables help keep colors consistent and make design changes less error-prone.
• Rough page structure: Describe how the initial styles position the header, hero, and main tiles without yet fine-tuning their spacing.
  Why it matters: The rough structure provides a place to apply the palette before refining the design.
• Contrast and visual emphasis: Distinguish how the button variants and footer styling give different parts of the page different levels of emphasis.
  Why it matters: Color and contrast can steer attention toward the key action and away from less important content.

Key terms: color palette, primary color, Brand Green, custom properties, hex color values, double-container pattern, nav-container, top-nav, hero, tile-row

11.2.1 Gamuts and color spaces

This section explains why CSS needs newer color notations, distinguishes color gamuts from color spaces, and shows how to detect a device’s supported gamut.

• Color gamuts and CSS limits: Explain what a color gamut is and why wider-gamut displays prompted new CSS color notations.
  Why it matters: It explains why changing color syntax can make a visible difference on newer screens.
• Color space arrangements: Distinguish a color space from a gamut and describe how RGB and HSL arrange colors differently.
  Why it matters: The distinction helps you understand why two ways of describing color can feel very different to work with.
• Color gamut media query: Describe how CSS can apply styles only when a particular color gamut is supported.
  Why it matters: It lets a stylesheet reserve wider-gamut styles for devices that support them.

Key terms: gamut, hex notation, sRGB, Display p3, Rec2020, color space, RGB, HSL, hue, lightness

11.2.2 CSS color notations

This section explains how CSS color notations express colors, how newer color spaces differ from sRGB, and why OKLCH is useful for working with color.

• Hex and RGB values: Explain how hex and rgb() encode red, green, and blue, and why their values can be difficult to interpret by eye.
  Why it matters: It clarifies what familiar color codes contain and why another notation may be easier to work with.
• HSL and HWB components: Describe what the components of HSL and HWB control, including their shared hue angle and their different ways of adjusting a color.
  Why it matters: These components make it easier to reason about a color than raw RGB values do.
• Color function transparency syntax: Explain the modern space-separated color-function syntax and how a slash adds an opacity value.
  Why it matters: One consistent syntax works across the color functions discussed in this section.
• Wide gamut perceptual color: Explain how the next-generation notations differ from sRGB-limited notations in color range and perceived consistency, and what happens when a display cannot show a specified color.
  Why it matters: A color value can represent a wider range of colors while remaining more predictable to a person adjusting it.
• LAB and LCH models: Distinguish the components of LAB and OKLAB from those of LCH and OKLCH, and explain why the section favors the OK versions.
  Why it matters: This distinction helps a reader choose a notation whose controls match how they want to adjust a color.
• Specific gamut color function: Describe when color() is useful and why the author finds it less practical for general color selection than OKLCH.
  Why it matters: It distinguishes choosing a specific gamut from choosing a convenient way to adjust colors.

Key terms: hex color, rgb(), sRGB gamut, hsl(), hwb(), hue, saturation, lightness, whiteness, alpha channel

11.3 Using OKLCH to work with color

This section shows how to use browser DevTools to convert CSS colors to OKLCH or another notation and interpret the color picker’s gamut boundary.

• DevTools color notation conversion: Describe how to find a page’s color custom properties in DevTools and convert a hex value to another notation. Distinguish Shift-clicking a color indicator to change notation from clicking it to open the color picker.
  Why it matters: DevTools gives you a readily available way to convert and adjust the colors already used on a page.
• Color picker gamut boundary: Explain what the color picker’s white gamut boundary means for how a selected color appears on an sRGB monitor.
  Why it matters: The boundary helps you recognize when a vivid color will not appear exactly as chosen on an sRGB monitor.

Key terms: DevTools, Elements panel, Styles panel, custom properties, color picker, OKLCH, wide gamut color space, sRGB gamut, Display p3

11.3.1 Switching the stylesheet to OKLCH

The section converts a site’s hex colors to OKLCH to reveal relationships in its palette and make related colors easier to create.

• Related colors in OKLCH: Explain how replacing hex values with OKLCH values makes relationships among the site’s greens visible and helps create another shade.
  Why it matters: OKLCH makes it easier to spot palette relationships and choose a starting point for new colors.
• Subtle chroma in grays: Describe what the OKLCH values reveal about the site’s gray colors and why the section says that detail can be useful.
  Why it matters: A color that looks gray can still contain a little color that affects the page’s appearance.
• Practical OKLCH adoption: Explain when the section recommends using OKLCH and what precaution it gives for real-world projects.
  Why it matters: You can use OKLCH where it helps without assuming every visitor’s browser supports it.

Key terms: hex, OKLCH, hue, lightness, chroma, DevTools, gray, browser support, fallback values

11.3.2 Naming color variables

This section explains how to name color custom properties so a palette can grow and colors can change without unexpectedly affecting other uses.

• Numbered palette color names: Explain why numeric names such as --gray-50 and --gray-80 are useful for raw color variables: the numbers roughly correspond to lightness and leave room to add shades between existing ones.
  Why it matters: A palette can gain new shades without forcing awkward names for every addition.
• Purpose-based color variables: Describe how a second set of variables can assign raw palette colors to uses such as foregrounds, backgrounds, and borders, and explain why the stylesheet then uses those secondary variables.
  Why it matters: Purpose-based variables let one design use a new color without unintentionally changing another use of the same raw shade.

Key terms: raw color variables, lightness, custom properties, secondary variables, foreground and background colors, light mode and dark mode

11.3.3 Selecting new colors for the palette

The section motivates adding a color to an existing palette when a needed color was not planned, using active links as an example.

• Palette additions that fit: Explain why a new color may be needed and why it should fit the page’s existing palette. Use the active-link example: the default bright red looks out of place, so the page needs a less vivid color that works with its green.
  Why it matters: A new color should serve its purpose without looking disconnected from the rest of the page.

Key terms: palette, active link color, user-agent stylesheet

11.3.4 Deriving colors from others on the page

This section shows how to derive colors from an existing palette using complementary hues, an OKLCH color picker, color-mix(), and relative color syntax.

• Complementary palette colors: Explain how to start with a color’s complementary hue, then adjust its lightness, chroma, and hue while previewing it on the page.
  Why it matters: It gives you a practical starting point for choosing a color that fits an existing page.
• OKLCH picker gamut feedback: Describe how the oklch.com picker helps select an OKLCH color and identify colors outside a display gamut.
  Why it matters: It helps you choose colors you can use and see what will happen when a selected color is out of gamut.
• Color mixing choices: Explain how color-mix() derives a color from two others, including the effect of interpolation space and percentages.
  Why it matters: It lets you derive related colors while making deliberate choices about the blend.
• Relative color components: Explain how relative color syntax derives a new color by changing components of an existing one.
  Why it matters: It provides a way to make related colors without manually copying and recalculating every component.

Key terms: complement, hue, chroma, lightness, DevTools, oklch.com, gamut, sRGB, Display p3, fallback color

11.4 Considering contrast for font colors

The section explains how to choose readable font colors by balancing visual comfort, WCAG contrast guidance, measured ratios, and the effect of font weight.

• Comfortable text contrast: Explain why very high and very low text contrast can both make reading difficult, and how replacing pure black or white with gray can help.
  Why it matters: Readable text needs enough contrast without making long passages uncomfortable.
• WCAG text contrast targets: Describe how WCAG level AA and AAA recommendations guide text contrast, including why large text has less strict targets and how the section applies the levels to body and decorative text.
  Why it matters: These recommendations give you practical targets rather than leaving readability entirely to guesswork.
• Contrast checks and font weight: Describe how to check a text–background color pair with a contrast checker and why the reported ratio does not settle readability on its own.
  Why it matters: Checking the ratio provides a useful starting point, while looking at the actual type keeps thin text from becoming unreadable.

Key terms: contrast, dark gray, light gray, WCAG, contrast ratio, level AA, level AAA, large text, contrast checker, font weight

11.5 Summary