11 Color and contrast
This chapter covers
- Converting a designer mockup into HTML and CSS
- Using contrast to draw attention to the most important parts of a page
- Selecting and manipulating colors
- Understanding color space and the various CSS color notations
- An in-depth look at OKLCH color
- Accessibility concerns with color
An important part of web development involves taking a mockup from a designer and bringing it to life with CSS and HTML. When you do this, you’re effectively translating art into code. Sometimes that translation is straightforward. Other times, you may have to work with the designer to make compromises. Where the designer has fine-tuned every piece of the mockup, you’ll need to consider how to organize the CSS for easy reuse. Your CSS will be more general purpose than their single-page mockup.
After the translational work is done, it’ll fall to you, the developer, to continue adding to the site, building on the vision laid out by the designer. It’s important that you at least have a general sense of the designer’s concerns about things like spacing, colors, and typography. You’ll need to know how to ensure your implementation is accurate. If you respect the designer’s goals, it’ll make this process less frustrating.