ع

Background & Text Preview

Test text, heading, button and border colors on a live mock interface.

Choosing colors that read well

Body text, headings and links should all stand out clearly from the background. Here is an inline example link.

A card title

Supporting text inside a bordered card.

Button Secondary
PairRatioAAAAA

  


    
  

    

    

      
About the Background & Text Preview
See real interface elements — headings, paragraphs, links, buttons, borders and cards — using your colors, with the contrast ratio of every pair shown alongside.
      
How to use it
  1. Set background, text and accent colors.
  2. Optionally set heading, border and button text colors.
  3. Review the live preview and the contrast table.
  4. Copy the CSS for the combination.
      
Examples
  • Preview a dark theme before implementing it.
  • Check whether a brand color works as button text background.
      
Frequently asked questions
Which ratios are shown?
WCAG 2.x contrast for each text color against its background.
Can I swap foreground and background?
Yes, use the swap button.
Is the preview responsive?
Yes, it reflows on small screens like a real page.
      
Related tools
Contrast CheckerAccurate WCAG contrast ratio with AA/AAA results and accessible suggestions.Palette Accessibility AnalyzerEvaluate readability and contrast across every combination in a palette.CSS Variables GeneratorGenerate CSS custom properties from your colors, with optional shade scales.