# Choose colors that scan (Help)

URL: https://qrdx.dev/docs/help/designing/colors-and-contrast
Source: https://github.com/bucharitesh/qrdx/blob/main/apps/docs/content/docs/help/designing/colors-and-contrast.mdx

Keep a dark code on a light background, keep strong contrast, and use gradients carefully.

Scanners look for dark squares on a light background. Most color problems come from breaking that rule.

## Change the colors [#change-the-colors]

In the [playground](https://qrdx.dev/playground), open the **Design** tab, then **Colors**.

- **Background** is the area behind the code.
- **Foreground** colors the small squares that hold your data.
- **Eyes** colors the three big squares in the corners.
- **Dots** colors the center of each corner square.

Each color can be solid, a linear gradient or a radial gradient. The palettes under the four colors set them all at once.

## Rules that keep a code scannable [#rules-that-keep-a-code-scannable]

- **Dark code, light background.** Light codes on dark backgrounds fail in some camera apps.
- **Strong contrast.** Aim for a contrast ratio of 4.5:1 or more between the code and the background.
- **Gradients stay dark.** A gradient is fine when every color in it is dark enough against the background.
- **Plain background.** A busy photo behind the code makes it harder to read.

## Check the contrast [#check-the-contrast]

The contrast checker in the toolbar above the preview shows the ratio for your colors. It flags pairs under 4.5:1.

The **Scan score** under the preview checks contrast too, along with size, clear space and the logo. See [Check a design with the scan score](https://qrdx.dev/docs/help/designing/scan-score).

## Related [#related]

- [A code won't scan](https://qrdx.dev/docs/help/troubleshooting/wont-scan)
- [Colors and gradients for developers](https://qrdx.dev/docs/features/colors-gradients)