@extends('layouts.app')
@section('title','Farbkontrast Rechner - WCAG Kontrast pruefen')
@section('meta_description','Pruefe den Kontrast zweier Farben nach WCAG und sieh sofort, ob AA und AAA erreicht werden.')
@section('meta_extra')@endsection
@section('content')
@include('tools._simple_style')
<div class="tool-page"><div class="tool-container">
<span class="tag">Developer</span><h1 class="tool-h1">Farbkontrast.</h1><p class="sub">Prüft, ob Vorder- und Hintergrundfarbe gut lesbar zusammenpassen.</p>
<div class="panel grid two"><label>Textfarbe<input id="fg" type="color" value="#0f172a"></label><label>Hintergrund<input id="bg" type="color" value="#ffffff"></label></div><div class="panel"><div class="result" id="preview">Beispieltext für Kontrast</div><div class="result" id="score"></div></div>
</div>@include('tools._ads_banner')</div>
<script>function lum(h){let a=[1,3,5].map(i=>parseInt(h.slice(i,i+2),16)/255).map(v=>v<=.03928?v/12.92:((v+.055)/1.055)**2.4);return .2126*a[0]+.7152*a[1]+.0722*a[2]}function update(){preview.style.color=fg.value;preview.style.background=bg.value;let r=(Math.max(lum(fg.value),lum(bg.value))+.05)/(Math.min(lum(fg.value),lum(bg.value))+.05);score.innerHTML=`Kontrast: <strong>${r.toFixed(2)}:1</strong><br>AA normal: ${r>=4.5?'bestanden':'nicht bestanden'}<br>AAA normal: ${r>=7?'bestanden':'nicht bestanden'}`}fg.oninput=bg.oninput=update;update()</script>

@include('tools._seo_content', ['toolSlug' => 'farbkontrast', 'toolName' => 'Farbkontrast Checker'])

@endsection