Design & Colour
Brand Colour Checker
Pick or paste a brand hex to see contrast ratios vs white and vs black.
Does my brand colour work on white or black?
Brand colours often look fine on a mood board and fail on a white page or dark hero. Paste or pick a HEX colour — hexadecimal notation packing red, green and blue (RGB) channels — and this tool reports WCAG-style contrast ratios against pure white and pure black so you can see which background keeps logos and large type readable. Higher ratios mean clearer separation of relative luminance. It does not replace a full pair check for arbitrary text and background combinations. For any two colours use the contrast checker, and for conversion between HEX, RGB and HSL try the HEX converter.
Worked example
#2A6F97 against white and black yields two ratios; pick the background with the higher ratio for body-sized brand text.
Limits and assumptions
Only white and black backgrounds. Large-text AA/AAA thresholds still need your judgement on font size.
Frequently asked questions
What are HEX and RGB?
HEX (hexadecimal) codes like #2A6F97 encode RGB — red, green and blue channel values from 0–255 — as six hex digits. Both describe the same screen colour.
What is a contrast ratio?
A WCAG measure of how differently bright two colours are. Roughly 4.5:1 is a common AA target for normal text.
Why only white and black?
Brand marks are often placed on light or dark fields first; use the dedicated contrast checker for other pairs.
Does CSS colour syntax matter?
CSS (Cascading Style Sheets) accepts #hex among other forms — paste hex here, then use whatever CSS form your stylesheet prefers.