Why is the text on my Shopify buttons hard to read?

Text on a Shopify button is hard to read when the label color and the button color are too close in lightness, and the usual culprit is white text on a light or bright brand color. White on coral #F47C5A measures 2.67:1 and white on yellow #F5C518 measures 1.63:1, while Shopify's own accessibility guidance asks for at least 4.5:1 for button text.

The fix is to change the button label to a dark color, or darken the button until white text reaches 4.5:1. In Dawn that is the Solid button label color in your color scheme; in Horizon it is Buttons, then Primary button, then Text.

Which brand colors fail with white button text?

More than most people expect. We measured 11 colors against white text and against a near black ink (#1A1A1A), using the WCAG contrast formula. A result of 4.5 or higher passes for normal button text.

Two things stand out. First, every light or bright color on the list passes easily with dark text, so the problem is almost never the brand color itself, only the label paired with it. Second, some mid tones fail with both. Bright red #E53935 sits in a dead zone where neither white nor black reaches 4.5:1, and the only fix is to shift the red a little darker (#E32C27 gets white text to 4.51:1).

What contrast ratio does a Shopify button need?

4.5:1 for button text at normal size. Shopify's help centre asks for that on body text and button text, and the Shopify Theme Store requirements use the same numbers. The full set:

Most add to cart buttons use 14 to 16px text, so the large text allowance does not apply to them. If you want to rely on the 3:1 figure, the label has to be at least 24px, or about 18.5px and bold.

Themes sold on the Shopify Theme Store must also reach an average Lighthouse accessibility score of at least 90 across the home, product and collection pages on desktop and mobile. That score is measured on the theme's demo colors. Once you swap in your own brand color, nothing checks it again: Shopify’s help centre describes no built in contrast check and points you to an outside contrast tool instead.

How do I change the button text color in Shopify?

It depends on the theme. Open Online Store, then Themes, then Customize, then the gear icon for Theme settings.

• Dawn (and the other free themes built on it): open Colors, click the color scheme your buttons sit on, and change Solid button label. The button fill is Solid button background in the same scheme. Dawn ships with a #121212 button and a #FFFFFF label, which is 18.73:1, so the problem only starts when the background is changed and the label is not. Check every scheme, because each section can use a different one.
• Horizon (and the free themes built on it): open Buttons, then under Primary button change Text. The fill is Background in the same group, and the secondary button has its own pair below it. By default Horizon sets the primary button to your palette's foreground and its text to your palette's background, which is high contrast until one of the two is changed by hand.
• Other themes: look in the Colors or Buttons group of Theme settings for a setting called button label, button text or text on accent. If a button's label has no setting at all, the color is written into the theme's CSS and needs a code edit or a message to the theme developer.

If the colors refuse to change when you edit them, that is a different problem, covered in why your Shopify theme colors won't change.

Should my button text be white or black?

Whichever measures higher against the button, and for light and bright colors that is almost always the dark one. Designers often reach for white because it looks crisper on a colored button, but on coral, yellow, teal, mustard and bright green white loses by a wide margin.

If you want to keep white text, the button has to go darker, and for some colors that changes what the brand looks like. Here is how far each color had to move, lowering its HSL lightness one point at a time until white text reached 4.5:1:

Red, blue and green survive the change. Yellow turns olive and light teal turns into a different teal, so for those two keep the brand color and put dark text on it.

Why does my button get harder to read when I hover over it?

Because many themes fade the button on hover with opacity, and a faded button lets the page show through. On a white page, a coral button at 85% opacity becomes #F69073, and white text on it drops from 2.67:1 to 2.29:1. A button that barely failed at rest fails worse the moment someone points at it.

The fix is a hover color, not a fade: a slightly darker shade of the button when the label is white, or a slightly lighter one when the label is dark. Either way the hover moves away from the label, so contrast goes up instead of down.

Why is the gray text on my store hard to read?

For the same reason: it is usually your text color with opacity applied, and opacity below about 0.6 fails on a white page. Near black #1A1A1A faded onto white measures:

Footer headings, copyright lines, compare at prices, cart item details and form placeholders are where this shows up. The same goes for your brand color used as text on a white page, such as section labels and links: coral text on white is the same 2.67:1 as white text on a coral button.

How do I check the contrast on my Shopify store?

• In Chrome: right click the button, choose Inspect, and click the small color swatch next to color in the Styles panel. The picker shows the contrast ratio against the background and marks whether it passes AA.
• For a whole page: run Lighthouse from the same DevTools window and read the accessibility section, which lists every element with insufficient contrast.
• For two hex codes: any online contrast ratio tool; Shopify's help centre links to one.
• On hover: check the hover state separately, because none of the above measure it unless you force it. In DevTools, the :hov button in the Styles panel pins the hover state.

Can a Shopify theme pick the button text color automatically?

Yes. Liquid has a color_contrast filter that returns the ratio between two colors, so a theme can measure the merchant's button color at render time and choose the label that reads. A simple version:

{%- assign btn = settings.button_color -%}
{%- assign on_white = btn | color_contrast: '#FFFFFF' -%}
{%- assign on_ink = btn | color_contrast: '#1A1A1A' -%}
{%- if on_white >= on_ink -%}
  {%- assign btn_label = '#FFFFFF' -%}
{%- else -%}
  {%- assign btn_label = '#1A1A1A' -%}
{%- endif -%}
<style>
  :root { --button-label: {{ btn_label }}; }
</style>

Because it runs every time the page renders, it keeps working when the merchant changes the color in the theme editor, which a label picked once at build time does not. One trap if you test against a threshold: color_contrast returns one decimal place, rounded half up. A true 4.48:1, such as #777777 on white, comes back as 4.5. Test for 4.6 if you need to be sure the real ratio clears 4.5.

For a color like bright red, where neither label passes, the theme has to darken the fill as well. Liquid's color_darken filter lowers lightness by a set number of points, so the theme can step the button darker until white text clears the bar.

We shipped this bug ourselves

Our theme generator had it until 24 September 2026. The base theme every store starts from had 36 CSS rules that put a fixed white or page colored label on the brand color: add to cart, the sticky add to cart bar, checkout in the cart and drawer, sale and new badges, the cart count, pagination and more. A comment in the code claimed a color mix "guarantees 4.5:1". It did not: coral mixed that way still measured 3.1:1 with white.

We found it on a store with a coral brand color and measured six palettes across seven page types at desktop and phone widths: 370 pieces of text on colored buttons and badges under 4.5:1, plus 52 more on hover. The fix is the approach in the section above: every button now measures its own label in Liquid, darkens the fill only when neither label passes, and uses a measured hover shade instead of an opacity fade. Across 700 test brand colors, 115 needed a darker fill; the rest kept their exact color. After the fix the same measurement found 0 failures on buttons and 0 on hover, and the result on a live Shopify store matched our local renders line for line.

Every theme in our free theme gallery ships the fixed buttons, so you can pick any brand color in the editor and the labels follow. If you are still choosing a starting theme, which free Shopify theme to use compares the 24 free ones.

How we checked this

Every ratio on this page was computed on 29 September 2026 with the WCAG 2.1 relative luminance formula, and the darkened colors were found by lowering HSL lightness one point at a time. The 4.5:1 and 3:1 thresholds, the large text sizes and the exceptions come from the W3C's Understanding page for success criterion 1.4.3; Shopify's figures come from its help centre page on accessibility for themes and from the Theme Store requirements, all read the same day. Dawn's settings were read from Dawn 16.0.0 source (config/settings_schema.json), and Horizon's from versions 4.1.5 and 4.2.0 on Shopify's GitHub. The color_contrast rounding and the before and after counts come from our own tests on our Shopify development store on 24 September 2026.