Craft & create
Build a colour palette that stays readable
Choose colours for different jobs, then check the text and background combinations people will actually use.
A good-looking palette is a starting point, not a readability test. Give each colour a job: background, text or accent. Then check the combinations your design will actually use.
Choose roles before you choose favourites
Open the ToolKoru Colour Palette Builder (opens in a new tab). Start with a light background, a darker text colour and an accent. Edit the HEX values and lock a favourite while exploring alternatives. Select your text and background in the pairing check; the same swatch can work in one pairing and fail in another.
A worked example: two almost identical greys
Set one swatch to #FFFFFF and another to #777777. Choose grey text on the white background. The contrast ratio is approximately 4.48:1: it fails the WCAG AA minimum for normal-sized text, even though it passes the large-text threshold.
Now change the grey to #767676. The ratio becomes approximately 4.54:1, passing AA for normal text. One small colour adjustment crosses the threshold, but this is a narrow margin—not a reason to stop checking the real design. Black #000000 on white gives 21:1.
Try Swap text and background to preview the reversed roles. The mathematical contrast ratio stays the same; the visual experience can still feel different.
Read the result correctly
W3C’s minimum-contrast guidance specifies at least 4.5:1 for ordinary text and 3:1 for large text, with defined exceptions. Large text means at least 18pt regular or 14pt bold—24 CSS pixels regular or 18⅔ CSS pixels bold, using the CSS unit conversion.
The builder also shows the higher AAA text thresholds: 7:1 for ordinary text and 4.5:1 for large text. It displays a rounded ratio but decides pass or fail using the unrounded value. A value below 4.5 must not be rounded into an AA pass.
Check the design, then save your choices
Apply the colours to a heading, paragraph and button. Check small labels too. A passing pair does not certify a whole palette or website as accessible: keyboard operation, labels, focus visibility and other requirements still matter. These calculations apply to opaque sRGB colours; photographs, gradients and translucent backgrounds need checks against their actual rendered backgrounds.
Export HEX codes or CSS from the builder and record each colour’s role. Colours are not automatically saved when you refresh the page, so keep your export before leaving.