GameParticles

Contrast Checker

ColorsNew

Pick foreground and background colors to get the exact contrast ratio with live preview. Shows WCAG AA and AAA pass/fail for normal and large text.

Foreground (text)
HEX:#1A1A2E
RGB:rgb(26, 26, 46)
Values:26, 26, 46
Background
HEX:#FFFFFF
RGB:rgb(255, 255, 255)
Values:255, 255, 255
Large text: 24px bold

The quick brown fox jumps

Normal text: 16px

The quick brown fox jumps over the lazy dog.

Small text: 12px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat.

Contrast Ratio

17.06
:1
Excellent: AAA compliant

WCAG Compliance

AA Normal text4.5:1
PASS
AA Large text3:1
PASS
AAA Normal text7:1
PASS
AAA Large text4.5:1
PASS

Color values

Foreground
#1A1A2Ergb(26, 26, 46)
Background
#FFFFFFrgb(255, 255, 255)

Works great for

WCAG accessibility auditing

Check any foreground/background color pair against WCAG 2.1 AA and AAA thresholds for both normal and large text in one view. Catch accessibility failures before a pull request reaches production.

🖋️

Verifying text readability

UI designers can paste text and background hex values from Figma or Sketch and instantly see whether body copy, captions, and headings meet minimum contrast requirements. The live preview shows real text at multiple sizes.

🏢

Brand color approval process

Validate that proposed brand color combinations meet accessibility standards before they are locked into a style guide. Presents a clear pass/fail verdict for each WCAG criterion so stakeholders can make informed decisions.

🏛️

Government & enterprise compliance

Public-sector and enterprise projects must meet Section 508 and WCAG AA requirements. Verify every UI color pair and document the contrast ratio for compliance reports and accessibility audits.

🌙

Dark mode contrast validation

Dark mode palettes often introduce new foreground/background pairings with insufficient contrast. Test each combination independently to ensure the dark theme meets the same accessibility bar as the light theme.

📖

Design system documentation

Record verified contrast ratios for every color token pair in a design system so component libraries are built on an accessible foundation. Export the hex values and ratio for inclusion in developer and designer docs.

contrast checkerwcag contrastcolor contrast ratioaccessibility contrastwcag aawcag aaaforeground background contrasta11y color checkcontrast ratio checkersection 508
JSON Formatter
Developer · Format, validate and minify JSON with syntax highlighting.
Base64 Encode / Decode
Developer · Encode text to Base64 or decode Base64 back to plain text.
URL Encoder / Decoder
Developer · Encode or decode URL components and query strings.
Hash Generator
Developer · Generate MD5, SHA-1, SHA-256 and SHA-512 hashes.
UUID Generator
Developer · Generate UUIDs v4 (random) in bulk with one click.
Regex Tester
Developer · Test regular expressions against text with live match highlighting.
Word Counter
Text · Count words, characters, sentences, paragraphs and reading time.
Case Converter
Text · Convert text between UPPER, lower, Title, camelCase, snake_case and more.
List Sorter
Text · Sort, reverse, deduplicate and shuffle lists of text.
Markdown Preview
Text · Write Markdown and see a live rendered preview side by side.
Percentage Calculator
Numbers · Calculate percentages, increases, decreases and what % one number is of another.
Color Converter
Colors · Convert colors between HEX, RGB, HSL and HSV instantly.
Snake
Arcade · Eat food, grow longer, don't hit the walls. A timeless classic.
2048
Puzzle · Slide tiles and combine them to reach the legendary 2048 tile.