Preview Tab
The Preview tab shows your current color pair applied to real UI component mockups. It lets you judge readability in context - not just as a number - so you can see how your pair actually looks in a navigation bar, a form, a hero section, or a data table.
The pair bar
At the top of the Preview tab, a compact bar shows your current pair at a glance: both color swatches, the hex values, the contrast ratio, and two controls.
- Swap button - swaps the foreground and background colors. This updates both the pair bar and all the component mockups below it immediately.
- Light/dark toggle - switches the preview background between the dark app background and a light background. Useful for checking how your pair reads in both contexts.
The pair bar always reflects the colors currently set in the Check tab. Change your colors in Check and the Preview tab updates automatically.
Color blindness simulation
Below the pair bar, a row of five buttons lets you simulate different types of color vision:
- Normal - standard color vision
- Protanopia - reduced sensitivity to red wavelengths
- Deuteranopia - reduced sensitivity to green wavelengths
- Tritanopia - reduced sensitivity to blue wavelengths
- Achromatopsia - complete color blindness (greyscale only)
Selecting a simulation applies a color transformation to all the mockups below. See Color Blindness Simulation for more detail on how the simulations work.
Component mockups
The mockups below show your pair applied across seven common UI contexts. They are labelled by section number and type.
01 - Navigation
A horizontal navigation bar with a brand wordmark, navigation links, and a primary button. Tests how your pair reads at typical small nav label sizes.
02 - Hero
A full-width hero section with an eyebrow label, large heading, body copy, and two buttons. Tests how your pair reads at display and body text sizes, which are the most common real-world use cases.
03 - Reversed
The same hero section with foreground and background swapped. This is automatic - it does not require you to manually swap in the pair bar. Useful for seeing both orientations side by side without losing your place.
04 - Form
A simple email subscription form with a label, input field, helper text, and a submit button. Tests usability for form UI, including the input border and placeholder text.
05 - Footer
A footer section with a brand name, tagline, navigation links, and a copyright line. Tests small text at the low end of the size range.
06 - Data table
A data table with column headers, row data, and dividing lines. Tests your pair across both header and body cells in a dense information layout.
07 - Chart
A bar chart and a line chart. Tests how your pair renders as a data visualization, including axis labels and data point markers.
Share button
A Share button at the bottom of the Preview tab copies a shareable link to the current pair. See Sharing Color Pairs for details.