Pevlika

Contrast Checker

Enter a text color and a background color to see the contrast ratio and whether it passes WCAG 2 accessibility guidelines.

Runs in your browser — nothing is uploaded

Large text sample

Normal text: The quick brown fox jumps over the lazy dog.

Small text is the hardest to read when contrast is low.

Result

—

    How to use Contrast Checker

    1. Enter the text (foreground) color and the background color.
    2. Read the contrast ratio and the AA / AAA results.
    3. If it fails, use the suggested color that passes.

    Questions

    What contrast ratio do I need?

    WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold). AAA requires 7:1 and 4.5:1. User-interface parts and icons need 3:1.

    How is the ratio calculated?

    It compares the relative luminance of the two colors using the WCAG 2 formula, giving a value from 1:1 (no contrast) to 21:1 (black on white).

    Color PickerPick a color and convert between HEX, RGB, HSL, HSV and CMYK, with shades and tints. Color Palette GeneratorGenerate harmonious 5-color palettes — random or from a base color — and export them. CSS Gradient GeneratorDesign linear, radial and conic CSS gradients and copy the code.