Accessible link states
Choosing link colors that remain distinguishable
Choose and test link colors against their background and surrounding text while preserving underlines, visited state, hover, and keyboard focus.
Practical color knowledge
Articles built from methods, not mythology.
Detailed guides in English, Russian, Spanish, and French, grounded in published standards, reproducible calculations, and copy-ready CSS examples.
Accessible button states
Button colors: text, fill, border, hover, and focus
Evaluate button text, fill, border, hover, active, disabled, and focus colors as complete interactive states instead of approving one isolated swatch.
Practical foreground selection
How to choose a readable text color for any background
Use a repeatable workflow to compare text colors on solid, translucent, gradient, and image backgrounds with tested WCAG contrast examples.
WCAG 2.2 contrast
Color contrast ratio explained with tested examples
Calculate WCAG 2.2 contrast from two sRGB colors, interpret AA and AAA thresholds, and inspect exact passing and failing examples.
Accessible data visualization
A practical color palette for charts and categories
Build categorical charts with labels, shapes, patterns, ordering, and measured contrast so the data remains understandable when color differences are unavailable.
CSS alpha and compositing
Alpha channels and color opacity in CSS
Learn how CSS alpha values, eight-digit HEX, functional color syntax, transparent paints, and the opacity property differ when colors are composited.
CSS color tokens
Organizing a small color system with CSS variables
Build a maintainable small color system with CSS custom properties, semantic tokens, controlled scope, fallbacks, themes, and contrast checks.
CSS color keywords
CSS named colors: when names help and when HEX is clearer
Use CSS color keywords accurately: check their exact sRGB values, recognize aliases and surprising names, and choose maintainable production tokens.
Dark interface palette
Building a dark-mode palette without simply inverting colors
Build a measured dark-mode palette for surfaces, text, borders, accents, and focus states without relying on automatic color inversion.
Accessible form design
Form state colors that do not rely on color alone
Design error, success, warning, disabled, and focus states that remain understandable without color, meet relevant contrast requirements, and give every user clear feedback.
CSS color formats
HEX, RGB, and HSL: what changes and what does not
Understand how HEX, RGB, and HSL represent CSS colors, convert one color without changing it, and choose a notation that fits the job.
HEX color fundamentals
How to read a six-digit HEX color code
Read any #RRGGBB color by hand: split its channels, convert hexadecimal pairs, recognize shorthand, and decode an optional alpha pair.
Practical HSL controls
HSL color values: useful controls and common traps
Use CSS HSL deliberately with exact sRGB examples, saturation and lightness scales, contrast checks, alpha syntax, and the limits of HSL perception.
Practical HWB controls
HWB colors: whiteness and blackness in CSS
Use CSS HWB with exact sRGB conversions, tested whiteness and blackness ramps, contrast results, sum normalization, alpha syntax, and practical token guidance.
Accessible light mode
Building a readable light-mode color palette
Build a readable light-mode palette by coordinating white surfaces, text levels, borders, accent states, focus indicators, compositing, and WCAG contrast checks.
CSS color syntax
Modern CSS color syntax with copy-ready examples
Compare modern CSS HEX, rgb(), hsl(), hwb(), lab(), and oklch() notation, understand their color spaces, and copy examples without changing a color accidentally.
Color comparison
How a nearest CSS color name is calculated
Learn how a color can be compared with the fixed CSS named-color set, why the chosen metric changes the winner, and why the returned keyword is an approximation rather than an authoritative name.
Perceptual CSS palette workflow
OKLCH for practical CSS palettes
Build practical CSS palettes with OKLCH lightness and chroma, tested sRGB conversions, contrast evidence, gamut limits, fallbacks, gradients, and color mixing.
Related colors without vague naming
Tints, shades, and tones: three different operations
Generate tints, shades, and tones with explicit sRGB math, reproducible HEX examples, color-mix() CSS, and contrast checks instead of ambiguous labels.
WCAG levels explained
WCAG AA and AAA contrast thresholds without the myths
Learn what WCAG AA and AAA really mean for normal and large text, how conformance levels accumulate, and what a contrast checker cannot certify.