Check a color pair, and find the nearest one that passes
Enter a text color and a background. The checker gives the contrast ratio against WCAG 2.1 AA and, when a pair falls short, the closest color in the same hue that meets it.
Contrast ratio
4.54:1Passes for every use below.
- Body textDescriptions, prices, links and labels under 24px, or under 18.66px when bold.
- Large textHeadings and other text at 24px and up, or 18.66px and up when bold.
- Icons, borders and focus ringsThe parts that show a control is there, like an input's outline or a cart icon.
How the suggestion works
The suggestion keeps the color’s hue and saturation and moves its lightness the shortest distance that reaches 4.5:1, so a brand orange stays an orange and a gray picks up the background’s tint. When no shade of that hue passes, it falls back to black or white, whichever is stronger.
It is the same code SiteRemora uses in its contrast panel. There, contrast is flagged and the color stays your call: the fix is written into the theme only after you pick or edit the color.
Ratios are rounded down, so a pair at 4.499:1 shows as 4.49:1 and fails. Logos, disabled controls and text that is purely decorative are exempt from these minimums.
Changing a color in Shopify
Most themes keep their colors in the theme editor: Online Store, Themes, Customize, then Theme settings and Colors. Themes built on color schemes set text, buttons and backgrounds per scheme, so one change fixes every section that uses the scheme.
A color set in a section’s own settings changes in that section. A color written into the theme’s CSS takes a code edit, which SiteRemora drafts with the color you chose and records so you can revert it.
More free checks are on the free tools page.
Attach a remora to your shop
Install from the App Store. The first scan is free, takes about a minute, and tells you exactly where you stand.