# WCAG Contrast Checker — Display Guides, Use Case Guides

For the full tool, see: [https://capytoolkit.com/tools/design/contrast-checker/](https://capytoolkit.com/tools/design/contrast-checker/)

## Display Guides
[Checking Contrast on the MacBook Pro M4's Liquid Retina XDR Display](https://capytoolkit.com/tools/design/contrast-checker/macbook-pro-m4-contrast/): How mini-LED local dimming and True Tone change what a passing WCAG contrast ratio looks like on the MacBook Pro M4's Liquid Retina XDR display.
[Checking Contrast on the iPhone 17 Pro's Super Retina XDR Display](https://capytoolkit.com/tools/design/contrast-checker/iphone-17-pro-contrast/): How Super Retina XDR OLED's true black and 3000-nit outdoor peak brightness change what a passing WCAG contrast ratio looks like on iPhone 17 Pro.
[Checking Contrast on the Samsung Galaxy S25's AMOLED Display](https://capytoolkit.com/tools/design/contrast-checker/samsung-galaxy-s25-contrast/): How the Galaxy S25's default Vivid screen mode can make a WCAG contrast pair look different than it will on a calibrated Natural-mode or desktop display.
[Checking Contrast on the Dell XPS 16 (2026) Tandem OLED Display](https://capytoolkit.com/tools/design/contrast-checker/dell-xps-16-contrast/): How Tandem OLED's wide color gamut and Dell Optimizer's auto-dimming affect a WCAG contrast pair on the Dell XPS 16 (2026), and what stays unaffected.

## Use Case Guides
[Checking Contrast for Dark-Mode UI Text](https://capytoolkit.com/tools/design/contrast-checker/contrast-check-dark-mode-text/): Pick a dark-mode background and text color, then check the exact WCAG ratio before it ships. Includes a safe #e0e0e0-on-#121212 starting pair.
[Checking a Brand Color Pair Against WCAG](https://capytoolkit.com/tools/design/contrast-checker/contrast-check-brand-colors/): Test a logo or brand color against a real background before it becomes a button, link, or heading. See the exact ratio and an Auto-Fix that keeps your hue.
[Checking Contrast for Button and UI Component States](https://capytoolkit.com/tools/design/contrast-checker/contrast-check-button-states/): Check a button border, focus ring, or hover state against WCAG's 3:1 non-text contrast rule, success criterion 1.4.11, before it ships.
[Checking Contrast for Large Text and Headings](https://capytoolkit.com/tools/design/contrast-checker/contrast-check-large-text-headings/): Check a heading or large-label color against WCAG's lower 3:1 (AA) and 4.5:1 (AAA) large-text thresholds instead of the stricter body-text bar.