SEO Groww
Meta Tags
Open Graph GeneratorTwitter Card GeneratorMeta Description GeneratorJSON-LD Generator
Audit & Check
SEO CheckerOn-Page SEO AuditReadability CheckerSite CrawlerBulk SEO Checker
Keywords & SERP
Keyword Density CheckerSERP Snippet Preview
Technical SEO
Canonical Tag GeneratorRobots.txt GeneratorXML Sitemap GeneratorHreflang GeneratorRedirect Generatorllms.txt Generator
AI Tools
AI SEO FixerSERP Competitor AnalysisCTR Score CheckerAI Keyword ResearchAI Content BriefAI Search Visibility
Accessibility
WCAG Contrast CheckerTarget Size CheckerFocus Appearance CheckerWCAG 2.2 Checklist
Ad Tech
GPT Lazy Load Generator
ContactOpen the studio

#000000 on #312e81 contrast ratio

1.83:1

Black text (#000000) on a dark blue (Tailwind indigo-900) background (#312e81) fails every WCAG 2.2 contrast threshold.

Swap: #312e81 on #000000

Large text sample

Normal body text in #000000 on #312e81. The quick brown fox jumps over the lazy dog.

WCAG 2.2 results

WCAG 2.2 contrast results for #000000 on #312e81
Normal text — WCAG 1.4.3 AA4.5:1Fail
Large text — WCAG 1.4.3 AA3:1Fail
UI components & icons — WCAG 1.4.11 AA3:1Fail
Normal text — WCAG 1.4.6 AAA7:1Fail
Large text — WCAG 1.4.6 AAA4.5:1Fail

Nearest passing colours

How it looks with colour blindness

Simulated with the Machado et al. (2009) model at full severity.

  • Aa

    Protanopia (no red cones)

    2.00:1

  • Aa

    Deuteranopia (no green cones)

    1.83:1

  • Aa

    Tritanopia (no blue cones)

    1.92:1

  • Aa

    Achromatopsia (no colour)

    1.84:1

Try a different pair

Colours

Hex, rgb() or hsl(). Alpha is composited.

Permalink

Preview

Large heading text

Normal body text at 14 px. The quick brown fox jumps over the lazy dog.

Outlined buttonA text link

Colour-blindness preview

Simulated with Machado et al. (2009), full severity.

  • AaProtanopia (no red cones)2.00:1
  • AaDeuteranopia (no green cones)1.83:1
  • AaTritanopia (no blue cones)1.92:1
  • AaAchromatopsia (no colour)1.84:1

Contrast ratio

1.83:1

WCAG 2.2 contrast verdicts
CheckCriterionNeedsResult
Normal text1.4.3 AA4.5:1Fail
Large text1.4.3 AA3:1Fail
UI components & graphics1.4.11 AA3:1Fail
Normal text1.4.6 AAA7:1Fail
Large text1.4.6 AAA4.5:1Fail

Nearest passing colours

Same hue, lightness adjusted in OKLCH.

AA — 4.5:1

Change text

#a3a3a3 · 4.52:1

Change background

#666cc4 · 4.50:1

AAA — 7:1

Change text

#cbcbcb · 7.04:1

Change background

#868de9 · 7.00:1

Large text means at least 24 CSS px, or 18.66 CSS px bold. Ratios are truncated, never rounded, so 4.49:1 is shown as failing 4.5:1.

Questions about this pair

Is #000000 on #312e81 accessible?
No. At 1.83:1 it fails every WCAG 2.2 text contrast threshold, including the 3:1 minimum for large text and UI components.
What is the contrast ratio of #000000 and #312e81?
1.83:1, calculated with the WCAG 2.2 relative luminance formula. The ratio is truncated, not rounded, so it never shows a failing pair as passing.
What colour passes AA on #312e81?
#a3a3a3 is the closest colour to #000000 — same hue, adjusted lightness — that reaches 4.5:1 on #312e81.

Related colour pairs