---
title: "/check-contrast - Check Color Contrast"
description: "Check color contrast ratios against WCAG accessibility requirements."
type: skill
canonical_url: https://claudary.paisolsolutions.com/skills/check-contrast
source: "Claudary"
difficulty: intermediate
author: "Claude Code Knowledge Pack"
date: 2026-07-10T11:13:51.195Z
license: CC-BY-4.0
attribution: "/check-contrast - Check Color Contrast — Claudary (https://claudary.paisolsolutions.com/skills/check-contrast)"
---

# /check-contrast - Check Color Contrast
Check color contrast ratios against WCAG accessibility requirements.

## Overview

# /check-contrast - Check Color Contrast

Check color contrast ratios against WCAG accessibility requirements.

## Steps

1. Scan CSS, SCSS, and styled-components for all text color and background color pairs
2. Resolve CSS custom properties and theme variables to actual color values
3. Calculate the luminance contrast ratio for each foreground/background pair
4. Check against WCAG 2.1 requirements: 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold)
5. Check non-text contrast for UI components and graphical objects: 3:1 ratio
6. Identify text on images or gradients that may have insufficient contrast
7. Check focus indicator contrast against adjacent colors
8. Verify contrast in both light and dark themes if the app supports them
9. Flag transparent or semi-transparent colors that reduce effective contrast
10. Generate a report: element, foreground color, background color, ratio, pass/fail
11. Show the total pass/fail count and compliance percentage
12. Highlight the worst offenders that need immediate attention

## Rules

- Test both light and dark mode color schemes
- Account for opacity when calculating effective contrast
- Large text threshold: 18px regular or 14px bold
- Do not flag disabled elements as they are exempt from contrast requirements
- Check placeholder text contrast (should meet 4.5:1 even though many sites skip this)
- Consider adjacent color contrast for interactive component boundaries
- Report all unique color pairs, not every instance

---

Source: [Claudary](https://claudary.paisolsolutions.com/skills/check-contrast) · https://claudary.paisolsolutions.com