Choose a pair for the reading task
Start with the background your design actually uses, then choose the text colour. Type a sentence with punctuation and familiar words. The heading and paragraph use the same colours at different sizes so you can judge their roles. Swap the colours to compare a light-on-dark treatment, but keep the intended reading conditions in mind. A short title and a long article place different demands on the reader.
Understand the contrast result
WCAG 2.2 Success Criterion 1.4.3 sets a 4.5:1 minimum for ordinary text and 3:1 for large text, with stated exceptions. Large text is at least 18 point, or 14 point bold. The tool reports both thresholds separately and compares the unrounded ratio. These thresholds evaluate colour contrast, not the entire readability or accessibility of a design. The W3C specification linked below explains scope and exceptions.
Copy colours into your design
Copy CSS colours places the foreground and background declarations on your clipboard. Apply them to the intended element in your stylesheet, then review the actual page: links, focus indicators, selected text and disabled controls may need their own colours. If clipboard access is unavailable, select the displayed declarations manually. A CSS colour declaration changes an element’s appearance; it does not create a downloadable font file.
Use solid colours for this calculation
This tool calculates relative luminance from opaque sRGB colours, then divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. A photograph, translucent overlay or gradient can put different backgrounds behind different letters. Do not use one solid-colour result to certify all of those pixels. For decorative multicolour image lettering, explore the rainbow font tool; for actual family selection, compare the font library.
Your questions, answered.
Can I copy coloured text into any social media caption?
The CSS declarations can style a web element where you control the stylesheet. Plain-text caption fields generally do not accept those declarations as text formatting. Copying the words is separate from applying their colour.
Does a passing ratio make my whole page accessible?
No. It answers the solid-colour contrast calculation shown here. Reading order, meaningful labels, keyboard access, enlargement and other requirements need separate attention.
Sources & background
Sources supporting this page’s explanations. Practical examples are our editorial suggestions.