Does UK law require colour contrast compliance?
Yes. Under the Equality Act 2010, UK public sector bodies must meet WCAG 2.1 Level AA as a minimum, enforced through the Public Sector Bodies Accessibility Regulations 2018. The Central Digital and Data Office monitors compliance and publishes accessibility statements for government services. GOV.UK itself ships a design system built around AA-compliant colour tokens: for example, the primary text colour #0b0c0c on white gives a ratio above 21:1, far above the 4.5:1 AA threshold.
Private sector businesses are also exposed to Equality Act risk if inaccessible colour choices make a service unusable for people with visual impairments, including colour blindness affecting around 8% of men in the UK.
WCAG 2.2 (October 2023) did not change the core contrast requirements but added new criteria around focus indicators, another colour-dependent feature.
What contrast ratio do I need to pass WCAG?
The two levels you will encounter most in UK projects:
- Level AA (required for public sector): 4.5:1 for body text, 3:1 for large text (18pt / 14pt bold) and UI components
- Level AAA (best-effort target): 7:1 for body text, 4.5:1 for large text
A typical pitfall is using a mid-grey (#767676) on white, which sits exactly at 4.5:1, barely passing AA. One shade lighter and it fails. Testing during design, not after build, saves costly rework.
The contrast checker returns the ratio for any two colour values, flags the WCAG level, and renders a live preview of text on background. Enter HEX, RGB, or HSL, all three are accepted.
How do I convert between HEX, RGB, HSL, and OKLCH?
Each colour format has a different purpose in a modern CSS workflow:
- HEX (
#1d70b8) is the default in design files and most browser devtools - RGB (
rgb(29, 112, 184)) is readable when you need to adjust individual channels in JavaScript - HSL (
hsl(210, 73%, 42%)) separates hue, saturation, and lightness, useful for generating tint-shade scales without shifting hue - OKLCH is the modern perceptual space behind CSS Color Level 4; all browsers now support
oklch()natively
Converting by hand involves non-trivial maths. The colour converter accepts any of the four formats and returns the others instantly.
How do I build a CSS gradient without trial and error?
A linear gradient is written as background: linear-gradient(angle, stop1, stop2, ...). Getting the angle, colour stops, and opacity right by hand takes multiple edit-refresh cycles.
The CSS Gradient Generator lets you pick colours, drag stops, and set the angle visually. It outputs clean, copy-ready CSS for both linear and radial gradients, including vendor prefixes where still needed. Useful for hero backgrounds, button hover states, and decorative dividers.
A practical accessibility note: avoid using gradient alone to convey information. Screen readers and users with low vision need colour-independent cues as well.
How do I generate a consistent colour scale for a design system?
A standard design token set includes a primary colour with ten steps (50 through 900 in Tailwind's convention), a neutral grey scale, and optional semantic colours (success, warning, error). Building this manually produces inconsistent lightness values, step 300 may look visually heavier than step 400, for example.
The colour palette generator takes a base colour and returns a full ten-step scale with HEX codes. You can copy each value directly into CSS custom properties or a Tailwind config.
When choosing palette steps for a UK public sector project, check that your primary text colour on the lightest tint still meets 4.5:1. A common pattern is to use steps 700-900 for text and steps 50-100 for backgrounds.
How do I extract colours from a reference image or brand asset?
When working from a client logo, product photo, or an existing design file you cannot export tokens from, the starting point is colour extraction. Drop the image into the extractor and it analyses dominant colours using the Canvas API, nothing is uploaded.
The output includes HEX, RGB, and HSL for each colour. From there, run each candidate through the contrast checker to see which combinations reach AA before committing them to your design system.
How do I pick an exact colour from a screenshot or mockup?
Design hand-offs do not always include a design file. When a client sends a PNG of their branding, you need to pick exact pixel colours. The image colour picker loads your image and returns HEX, RGB, and HSL for any pixel you click.
Combine it with the contrast checker: pick your text colour, pick your background colour, then verify the pair passes AA before writing the first line of CSS.