Color, Design & Accessibility
Practical guides on color theory, WCAG accessibility, and the science behind color.
Build an Accessible Color Palette by Assigning Roles First
Choose surfaces, text, links and state colors as tested pairs, with calculated examples and a handoff checklist.
RGB to CMYK: Why a Web Conversion Is Only an Approximation
Learn what a profile-free CMYK calculation can show, where it stops, and what to send a printer for a reliable color handoff.
Use the 60-30-10 Color Rule as a Layout Exercise
Try a dominant surface, supporting color and accent without treating a proportion guideline as an accessibility or conversion rule.
Color Psychology: Test Associations in Context
Separate color-emotion research from brand claims and use a concrete research exercise before choosing a palette.
Build a Dark Mode Palette with Tested Color Roles
Work through a dark canvas, surface, body text and action color, then check their actual pairings before exporting.
WCAG Contrast Ratios: Calculate, Interpret and Fix a Failing Pair
A worked explanation of luminance, unrounded thresholds and foreground fixes, including the near-miss of #777777 on white.
HSL Color Model: A Practical Guide for CSS
Read hue, saturation and lightness, try a controlled color change, and understand why equal HSL lightness does not mean equal contrast.
Build a Brand Palette from Real Interface Roles
Turn a brand accent into surface, text and action tokens, with separate decisions for digital use and print handoff.
Four Website Color Pairs to Test in 2026
Compare four concrete text and background pairs with calculated results and role-specific limitations; these are examples, not a trend ranking.
Design Color Cues That Remain Understandable
Use explicit labels, patterns and shape alongside color, with a status-message example and clear limits for simulations.
CSS Color Functions: Values, Alpha and Fallbacks
Choose a color notation based on the operation you need, with runnable CSS examples and explicit conversion limits.
Choose Chart Colors by the Question and the Data
Distinguish categorical, ordered and diverging palettes, and keep chart meaning available through labels and data.
Warm and Cool Colors: Compare the Context
Use warm and cool as relative design descriptions, then inspect the actual reading pair and composition.
Choose Text Colors by Role and Background
Test body copy, secondary text, links and disabled labels with concrete inputs rather than picking gray by appearance.
From Figma Color Decisions to Tested CSS Tokens
Carry values, profiles, opacity and semantic roles from design to code, then inspect the rendered component.
Export Color Tokens for Tailwind CSS v3 and v4
Use the correct Tailwind configuration format and test a real button before treating a generated scale as a design system.
CSS Gradients: Interpolation, Stops and Readable Text
Compare interpolation spaces and build a gradient with a controlled text surface instead of trusting endpoint contrast.
UI Contrast: Check Labels, Boundaries and States Separately
Work through an input and a button without confusing text contrast with the contrast of required visual cues.
APCA and WCAG Contrast: Why the Numbers Differ
Compare the two calculations with exact color pairs, understand APCA polarity, and keep WCAG 2.2 decisions separate from supplementary Lc measurements.
OKLCH in CSS: Lightness, Chroma and Gamut
Understand OKLCH units, compare it with HSL, and keep sRGB conversion limits visible in a practical palette workflow.
How to Compare Two Colors for a Specific Design Role
Separate visual difference from text contrast, compare exact values, and preserve both colors in a shareable decision.
A Practical Color Accessibility Review Checklist
Record text, boundaries, focus and color-only meaning separately, with a worked form example and evidence you can hand to a reviewer.
Design Color Tokens with Explicit Roles and Tested Pairs
Build primitive, semantic and component tokens from a small palette, then export and test the roles that consume them.
CSS color-mix(): Weights, Spaces and Tested Results
Mix a tint or state color with explicit interpolation and check the final result rather than assuming the mix is accessible.
HEX to RGB: Convert Bytes, Expand Shorthand and Handle Alpha
Convert #228BE6 by hand, verify the result in a tool, and avoid confusing shorthand and transparency with six-digit color values.
Five Web Palette Starting Points with Explicit Roles
Explore small palettes for an article, dashboard, portfolio, shop and dark workspace, then test the roles before exporting.
Using Red in Interfaces: Meaning, Roles and Contrast
Keep error and destructive-action meanings explicit, and test red as text and as a surface with concrete examples.
How to Audit Text Contrast on a Real Web Page
Find the actual foreground and surface, test interactive states, fix a failure and record evidence that another person can reproduce.