The Relative Luminous Color Wheel is a free color picker and WCAG 2.2 contrast checker
built around one idea: every color on the wheel shares exactly the same relative
luminance. WCAG contrast ratios are computed from relative luminance alone, so any
color you pick from the wheel keeps the same contrast ratio against your chosen background —
change hue and saturation as much as you like, and an AA or AAA rating never breaks.
Why equal luminance matters
Traditional color pickers make you choose a color first and verify accessibility afterwards,
looping between the picker and a contrast checker until something passes. Here the order is
reversed: set the target relative luminance first, and the wheel redraws so that every
reachable color already satisfies it. Exploring accessible color stops being trial-and-error
and becomes a guarantee.
Lock a contrast target
Beyond checking, the picker can enforce. Choose a WCAG 2.2 threshold — 3:1 for large text
and UI components, 4.5:1 for normal text AA, 7:1 for AAA — or an experimental APCA
lightness-contrast target (Lc 45–90, a newer perceptual method), and whichever side you are
not touching adjusts itself automatically, pinning the pair precisely at the threshold while
you explore hue, saturation, and luminance on the other side.
What you can do here
- Pick accessible text and background colors for websites, apps, and design systems
- Check contrast against white, black, or any custom color — WCAG 2.2 AA/AAA badges for normal text, large text, and UI components, with experimental APCA Lc readouts alongside; saved palette swatches appear as a compact preview strip inside every contrast tile
- Pin colors to the palette sidebar as text or background roles — re-edit any saved color in place with an inline RGB / HSL / Lum / Gray picker (defaults to Lum), a live contrast preview against a selectable opposite-role color, tap outside the editor to save like Done, use Cancel to revert edits, reorder saved colors with a more forgiving mobile drag gesture, drag the sidebar right and release to close it (with a smooth, iCloud Mail-style spring-back transition), copy hex values in one tap, and drag across groups to swap a color's role
- Simulate protanopia, deuteranopia, and tritanopia across the whole app (including the layout, sliders, and preferences modal) using high-fidelity, hardware-accelerated CSS and SVG filters (fully optimized for iOS/Safari, Android, and desktop browsers)
- Share your exact color state with a URL, or export everything — palette included — as CSS custom properties, a Tailwind v4
@theme block, or W3C Design Tokens (DTCG 2025.10) JSON, in your choice of OKLCH, hex, or RGB (with an sRGB hex fallback in OKLCH and hex modes). Exports prioritize saved swatches while active main picker values are backed up inside comments and JSON extensions
Who it's for
UI and visual designers choosing theme colors, front-end engineers implementing design
tokens, and accessibility specialists auditing color contrast. Everything runs locally in
your browser — no account, no upload, free to use.
Accessibility standards & compliance
Color contrast is a legal requirement in a growing number of places. WCAG 2.2 (and 2.1)
level AA is the standard referenced by the Americans with Disabilities Act (ADA) and by the
European Accessibility Act, whose obligations began on 28 June 2025 (EN 301 549 points to
WCAG 2.1 AA). AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for
large text and non-text UI, and AAA raises normal text to 7:1. This tool targets those exact
thresholds, so the colors you ship meet the requirement by construction
rather than by after-the-fact auditing. APCA is provided as a forward-looking, experimental
option; WCAG 2.2 remains the normative basis.
Frequently asked questions
What contrast ratio do I need for accessibility?
WCAG 2.2 — the basis for the ADA and the European Accessibility Act — requires a contrast
ratio of at least 4.5:1 for normal text and 3:1 for large text and UI components at level
AA, rising to 7:1 for normal text at AAA. This tool locks any of these targets so your
colors meet them by construction.
Is APCA part of WCAG 3?
Not currently. APCA (Advanced Perceptual Contrast Algorithm) is a newer perceptual method
that was explored for WCAG 3 but removed from the draft in 2023; WCAG 3's contrast method is
still undecided. WCAG 2.2 remains the normative, legally-referenced standard, so this tool
uses it by default and offers APCA Lc as an experimental, forward-looking option.
What is relative luminance?
Relative luminance is the perceived brightness of a color, computed as
L = 0.2126·R + 0.7152·G + 0.0722·B on linearized channels. WCAG contrast ratios depend only
on the two colors' relative luminance, so every color on this wheel shares one luminance and
keeps the same contrast against your background.
How do I pick accessible colors without trial and error?
Set a target contrast (or a target luminance) first, then move around the wheel. Because
contrast is held as a constraint, every color you can reach already passes — there is no
pick-then-check-then-adjust loop.
Can I export colors to CSS, Tailwind, or design tokens?
Yes. Export your palette as CSS custom properties, a Tailwind v4 @theme block,
or W3C Design Tokens (DTCG 2025.10) JSON — in your choice of OKLCH, hex, or RGB, with an
sRGB hex fallback in OKLCH and hex modes. Pinned swatches are prioritized on export, while the active main picker
colors are safely backed up inside CSS/Tailwind comments and JSON extension properties.
Your colors and palette also travel in a shareable URL.
Is it free and private?
Yes. It is completely free with no account and no sign-up, and it is private by design —
everything runs locally in your browser with nothing uploaded.