How is this different from a color picker?

A picker finds one color. Color Pairs starts from what you are making and how many colors you need — then recommends full systems with roles, face/reverse contrast, and a live mock.

What does Duo vs Trio mean?

Duo is two colors (surface + ink) checked both ways — face and reverse. Trio is surface, content, and one accent — the classic 60·30·10 rule for slides and landings.

Can I start from my brand color?

Yes. Use Primary color — the same OKLCH CompactPicker as Studio — or open /pairs?hex=2563EB. Systems re-hue around that primary while keeping role lightness and contrast discipline.

Are the pairs accessible?

Duo mode shows WCAG 2.1 and APCA results for both directions. Multi-role systems keep ink and surface contrast disciplined in the generator.

What is the difference between Duo, Trio, Brand and System?

They are the same navigator with two, three, four or five colours. Duo has a surface and an ink. Trio adds an accent. Brand has surface, muted, ink and accent. System has surface, muted, ink, primary and accent. Choose by how many roles your design needs.

What contrast ratio do I need for text?

WCAG 2.2 AA asks for 4.5:1 for normal text and 3:1 for large text, which is about 18pt or 14pt bold. AAA asks for 7:1 for normal text. Interface component boundaries and meaningful graphics need 3:1 under SC 1.4.11. Check the actual text and background colours you use.

Why does the same pair give different APCA values in each direction?

WCAG ratios are symmetric, but APCA is polarity-aware: dark text on a light background and light text on a dark one give different signed Lc values. That is why the tables list text first and background second. APCA is a WCAG 3 draft candidate, so use it as a second opinion.

Does Pairs check my accent colour for accessibility?

The built-in check covers the surface and ink pair in both directions. Accent and primary colours are not tested against anything, so verify button labels, links and focus outlines yourself in the contrast checker before you rely on them in a real interface.

How do I fix a pair that fails 4.5:1 without changing the brand hue?

Keep hue and chroma and change OKLCH lightness, moving the colour away from the other one until the ratio passes. Darken text on light backgrounds, or darken a button that carries a white label. The result keeps its family but gets deeper, so check it still suits your brand.

Are high-contrast pairs enough for colour-blind users?

They help, because a lightness difference usually survives a colour vision deficiency better than a hue difference does. They are not a guarantee, since experiences vary. Do not use colour alone to carry meaning: add text, icons, underlines or patterns, and preview your pairs with a simulation.

Choosing colour pairs that stay readable

Duo, trio, brand and system: how they differ

The navigator is organised by how many colours you want. Each count has its own page and a different set of roles. Duo is two colours, a surface and an ink, and it is the one to use when the job is a card, a poster or a minimal logo. Trio adds an accent to those two, with proportions of roughly 60 surface, 30 ink and 10 accent. Brand has four roles (surface, muted, ink and accent) and System has five (surface, muted, ink, primary and accent), which is closer to what a product interface needs.

Around that choice you set a task (just browsing, website, presentation or business card), a mood, a temperature, and optionally a primary colour. The primary is the same OKLCH picker used in the Studio, and you can also open the page with ?hex=2563EB to start from a brand blue. The generated systems are then re-hued around it. Each recommendation shows a live mock, and you can copy the HEX codes, CSS variables or a Tailwind block, or open the export dialog.

Foreground and background roles

Every contrast result needs a direction. The foreground is whatever is drawn on top, usually text, and the background is whatever sits behind it. The WCAG ratio is the same either way round, but APCA is not: the signed Lc value changes with polarity, which is why the tables on this page always list the text colour first and the background second. A pair that works as dark text on a light card can be a different experience as light text on a dark one.

That is why Duo checks both directions, called face and reverse. Ink on surface is the face, and surface on ink is the reverse, which is what you get when a card is flipped or a slide has a dark title band. Cards in the list are marked Contrast OK or Weak reverse based on that check. One limit to be aware of: the check covers the surface and ink pair. The accent and primary colours are not tested against anything, so test your real button labels and links yourself in the contrast checker.

Contrast thresholds and eight example pairs

The WCAG 2.2 numbers are simple. Body text needs 4.5:1 at the AA level (success criterion 1.4.3) and 7:1 for AAA. Large text, meaning roughly 18pt or 14pt bold and above, needs 3:1. Under SC 1.4.11, the visual parts of interface components that you need in order to identify them, such as a button border or a form field outline, and meaningful graphics also need 3:1 against their neighbours. A button label is text, so it follows the text rule, while the button's edge against the page follows the non-text rule.

The table shows eight common pairs. All figures are computed from the HEX codes. Body AA and AAA refer to normal-size text. The 3:1 column is the large-text and non-text threshold. APCA Lc is signed and shown for the text on the background; as a rough rule of thumb this site's checker treats an absolute Lc of 75 or more as comfortable for body text, but those are guidelines and not a standard. The fix column moves one colour in OKLCH lightness, keeping its hue and chroma, until the pair reaches 4.5:1. You will notice the grey caption #6b7280 passes WCAG AA while scoring just under that APCA rule of thumb, a reminder that the two methods can disagree near the edges.

Common text and background pairs, text first, computed at build time with a lightness fix for failing pairs
Use	Text	Background	WCAG	Body AA	Body AAA	3:1 (large / UI)	APCA Lc	Fix for 4.5:1
White label on blue button	`#ffffff`	`#2563eb`	5.17:1	Pass	Fail	Pass	Lc -80	—
Grey caption on white	`#6b7280`	`#ffffff`	4.83:1	Pass	Fail	Pass	Lc +74	—
White label on orange button	`#ffffff`	`#f97316`	2.80:1	Fail	Fail	Fail	Lc -58	`#cd4a00`4.59:1
Yellow text on white	`#facc15`	`#ffffff`	1.53:1	Fail	Fail	Fail	Lc +24	`#996d00`4.62:1
Light grey on near-black	`#e5e7eb`	`#111827`	14.33:1	Pass	Pass	Pass	Lc -91	—
White label on green button	`#ffffff`	`#16a34a`	3.30:1	Fail	Fail	Pass	Lc -65	`#008830`4.60:1
Placeholder grey on white	`#9ca3af`	`#ffffff`	2.54:1	Fail	Fail	Fail	Lc +50	`#6f7681`4.58:1
Borderline grey on white	`#767676`	`#ffffff`	4.54:1	Pass	Fail	Pass	Lc +72	—

The fix moves one colour (the background for coloured buttons, the text otherwise) in OKLCH lightness, keeping hue and chroma, until the pair reaches 4.5:1. APCA values are rules of thumb, not a requirement.

Why pairs with equal HSL lightness can fail

A common shortcut is to pick two colours with the same saturation and different HSL lightness values and assume the gap guarantees contrast. It does not, because HSL lightness is a calculation on RGB channels and not a measure of how light a colour looks. The table lists four pure hues that all have HSL lightness 50%. Their OKLCH lightness runs from the mid-range to almost white, and the contrast of white text on them runs from comfortable to unreadable. A yellow and a blue with identical HSL values are not remotely matched in weight.

OKLCH lightness tracks perceived lightness, which is what contrast ratios respond to, so it is the better control when tuning a pair. The guide OKLCH vs HSL covers the difference in more depth.

Four pure hues with the same HSL lightness (50%), measured in OKLCH and against white text
HSL value	Colour	OKLCH L	White text on it
hsl(0 100% 50%)	`#ff0000`	0.63	4.00:1
hsl(60 100% 50%)	`#ffff00`	0.97	1.07:1
hsl(120 100% 50%)	`#00ff00`	0.87	1.37:1
hsl(240 100% 50%)	`#0000ff`	0.45	8.59:1

Fixing a failing pair by changing lightness

When a pair fails, resist the urge to pick another hue. Keep the hue and chroma, and move lightness away from the other colour in small steps until the ratio clears 4.5:1. That is the method behind the fix column above: the orange button #f97316 becomes #cd4a00, and the yellow text #facc15 becomes #996d00. Both are recognisably the same family, only deeper. For text on a light background you darken the text; for a coloured button with a white label you darken the button.

The cost is that the colour can look different from the original brand swatch. An orange that has been darkened enough for white text will read closer to rust. If that is too far from your brand, the other route is to keep the fill and switch the label to a dark colour, or to use the bright colour for large shapes and non-text decoration only. The picker and contrast pages work with the same maths, so you can try variants in the OKLCH picker and see the effect immediately. For a worked set for a product site, see the SaaS landing page.

Colour-blindness: don't rely on colour alone

Many people, more often men than women, have a form of colour vision deficiency, and the exact experience varies a lot between types and individuals. Two things help in almost every case. First, make sure the two colours differ in lightness and not just in hue, since a lightness gap is usually preserved when hue differences are not. A pair that clears 4.5:1 already has that property. Second, never let colour be the only signal. WCAG's success criterion 1.4.1 asks for something else as well: an icon, a label, an underline on links, a pattern in a chart.

The Pairs navigator does not simulate colour vision deficiency. The contrast checker has simulation modes, so you can preview a pair there; treat any simulation as an approximation. It is also worth looking at your reds and greens in the red and green families, because that is the combination most often used for status and most often confused. When you are ready to compare ideas, the palette library and trio systems give you a starting point.

Last reviewed 2026-11-03.

Color combinations that start from intent

Colorise Pro Pairs is a free pairing navigator for design engineers — not a random palette generator. Anchor on a primary brand color, filter by task and mood, then export role-based Duo, Trio, Brand, or System tokens for print, slides, and product UI.

Frequently asked questions

How is this different from a color picker?: A picker finds one color. Color Pairs starts from what you are making and how many colors you need — then recommends full systems with roles, face/reverse contrast, and a live mock.
What does Duo vs Trio mean?: Duo is two colors (surface + ink) checked both ways — face and reverse. Trio is surface, content, and one accent — the classic 60·30·10 rule for slides and landings.
Can I start from my brand color?: Yes. Use Primary color — the same OKLCH CompactPicker as Studio — or open /pairs?hex=2563EB. Systems re-hue around that primary while keeping role lightness and contrast discipline.
Are the pairs accessible?: Duo mode shows WCAG 2.1 and APCA results for both directions. Multi-role systems keep ink and surface contrast disciplined in the generator.
What is the difference between Duo, Trio, Brand and System?: They are the same navigator with two, three, four or five colours. Duo has a surface and an ink. Trio adds an accent. Brand has surface, muted, ink and accent. System has surface, muted, ink, primary and accent. Choose by how many roles your design needs.
What contrast ratio do I need for text?: WCAG 2.2 AA asks for 4.5:1 for normal text and 3:1 for large text, which is about 18pt or 14pt bold. AAA asks for 7:1 for normal text. Interface component boundaries and meaningful graphics need 3:1 under SC 1.4.11. Check the actual text and background colours you use.
Why does the same pair give different APCA values in each direction?: WCAG ratios are symmetric, but APCA is polarity-aware: dark text on a light background and light text on a dark one give different signed Lc values. That is why the tables list text first and background second. APCA is a WCAG 3 draft candidate, so use it as a second opinion.
Does Pairs check my accent colour for accessibility?: The built-in check covers the surface and ink pair in both directions. Accent and primary colours are not tested against anything, so verify button labels, links and focus outlines yourself in the contrast checker before you rely on them in a real interface.
How do I fix a pair that fails 4.5:1 without changing the brand hue?: Keep hue and chroma and change OKLCH lightness, moving the colour away from the other one until the ratio passes. Darken text on light backgrounds, or darken a button that carries a white label. The result keeps its family but gets deeper, so check it still suits your brand.
Are high-contrast pairs enough for colour-blind users?: They help, because a lightness difference usually survives a colour vision deficiency better than a hue difference does. They are not a guarantee, since experiences vary. Do not use colour alone to carry meaning: add text, icons, underlines or patterns, and preview your pairs with a simulation.

Colorise ProOKLCH Engine

Color pairs

Find a color pair that works

Set a primary (optional), choose task and how many colors, then pick a system — live preview updates instantly.

For presentations For business cards For SaaS landings

What are you making?

How many colors?

Mood

Primary color

Choose a brand hue — systems re-hue around it (anchored, complement, analog).

Full picker

Live preview

Indigo Paper

Face and reverse — both directions checked

Face

Business card face

Name · Role · subtle line

Accent

WCAG AAAAPCA 100

Reverse

Cover / reverse

Logo mark · short wordmark

WCAG AAAAPCA 102

SurfaceF4F9FF
Ink141A29
Accent4273B0

Recommended systems

12 matches