Flutter Contrast Checker Card with WCAG AA and AAA Pass Badges
A WCAG 2.2 colour contrast card for design system and accessibility apps: text and background swatches, a live preview of body and large text, the 3.74:1 ratio on a threshold scale, AA and AAA pass or fail tiles for normal and large text, and a one-tap fix to the nearest passing shade.
by Anılcan Çakır
93 views
0 stars
3 weeks ago
Rev 1
main.dart
WDiv(
className: 'w-[340px] rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-5 flex flex-col shadow-xl',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-10 h-10 rounded-xl bg-gray-900 dark:bg-white',
child: WIcon(
Icons.visibility,
className: 'text-white dark:text-gray-900 text-xl'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Contrast Checker',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'WCAG 2.2 text contrast',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-amber-100 dark:bg-amber-900/40 px-3 py-1',
child: WText(
'Large only',
className: 'text-xs font-bold text-amber-700 dark:text-amber-300'
)
),
]
),
WDiv(
className: 'flex flex-row gap-2 w-full mt-4',
children: [
WDiv(
className: 'flex flex-row items-center gap-2 w-[145px] rounded-xl border border-gray-200 dark:border-gray-700 p-2',
children: [
WDiv(
className: 'w-8 h-8 rounded-lg bg-[#0D9488] dark:bg-[#0D9488]'
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Text',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
WText(
'#0D9488',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
]
),
]
),
WDiv(
className: 'flex flex-row items-center gap-2 w-[145px] rounded-xl border border-gray-200 dark:border-gray-700 p-2',
children: [
WDiv(
className: 'w-8 h-8 rounded-lg bg-white dark:bg-white border border-gray-300 dark:border-gray-600'
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Background',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
WText(
'#FFFFFF',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
]
),
]
),
]
),
WDiv(
className: 'flex flex-col w-full mt-3 rounded-xl bg-white dark:bg-white border border-dashed border-gray-300 dark:border-gray-600 px-4 py-3',
children: [
WText(
'Book a free demo',
className: 'text-2xl font-bold text-[#0D9488] dark:text-[#0D9488]'
),
WText(
'Cancel anytime, no card required.',
className: 'text-sm text-[#0D9488] dark:text-[#0D9488] mt-1'
),
]
),
WDiv(
className: 'flex flex-row items-end justify-between w-full mt-4',
children: [
WText(
'3.74:1',
className: 'text-4xl font-bold text-gray-900 dark:text-white'
),
WText(
'contrast ratio',
className: 'text-xs text-gray-500 dark:text-gray-400 mb-1'
),
]
),
WDiv(
className: 'relative w-[298px] h-[34px] mt-3',
children: [
WDiv(
className: 'flex flex-row w-[298px] h-[10px] mt-[4px]',
children: [
WDiv(
className: 'w-[74px] h-[10px] rounded-l-full bg-red-400 dark:bg-red-500'
),
WDiv(
className: 'w-[56px] h-[10px] bg-amber-400 dark:bg-amber-500'
),
WDiv(
className: 'w-[93px] h-[10px] bg-emerald-400 dark:bg-emerald-500'
),
WDiv(
className: 'w-[75px] h-[10px] rounded-r-full bg-emerald-600 dark:bg-emerald-700'
),
]
),
WDiv(
className: 'absolute left-[99px] top-[0px] w-[5px] h-[18px] rounded-full bg-gray-900 dark:bg-white border border-white dark:border-gray-900'
),
WText(
'1',
className: 'absolute left-[0px] top-[20px] text-[10px] text-gray-400 dark:text-gray-500'
),
WText(
'3',
className: 'absolute left-[71px] top-[20px] text-[10px] text-gray-400 dark:text-gray-500'
),
WText(
'4.5',
className: 'absolute left-[122px] top-[20px] text-[10px] text-gray-400 dark:text-gray-500'
),
WText(
'7',
className: 'absolute left-[220px] top-[20px] text-[10px] text-gray-400 dark:text-gray-500'
),
WText(
'9+',
className: 'absolute left-[284px] top-[20px] text-[10px] text-gray-400 dark:text-gray-500'
),
]
),
WDiv(
className: 'flex flex-col gap-2 w-full mt-3',
children: [
WDiv(
className: 'flex flex-row gap-2 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-[145px] rounded-xl bg-red-50 dark:bg-red-900/30 px-3 py-2',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'AA text',
className: 'text-xs font-semibold text-gray-900 dark:text-white'
),
WText(
'4.5:1',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
)
]
),
WText(
'Fail',
className: 'text-xs font-bold text-red-600 dark:text-red-400'
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-[145px] rounded-xl bg-emerald-50 dark:bg-emerald-900/30 px-3 py-2',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'AA large',
className: 'text-xs font-semibold text-gray-900 dark:text-white'
),
WText(
'3:1',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
)
]
),
WText(
'Pass',
className: 'text-xs font-bold text-emerald-600 dark:text-emerald-400'
),
]
),
]
),
WDiv(
className: 'flex flex-row gap-2 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-[145px] rounded-xl bg-red-50 dark:bg-red-900/30 px-3 py-2',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'AAA text',
className: 'text-xs font-semibold text-gray-900 dark:text-white'
),
WText(
'7:1',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
)
]
),
WText(
'Fail',
className: 'text-xs font-bold text-red-600 dark:text-red-400'
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-[145px] rounded-xl bg-red-50 dark:bg-red-900/30 px-3 py-2',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'AAA large',
className: 'text-xs font-semibold text-gray-900 dark:text-white'
),
WText(
'4.5:1',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
)
]
),
WText(
'Fail',
className: 'text-xs font-bold text-red-600 dark:text-red-400'
),
]
),
]
),
]
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-[#0C857A] dark:bg-[#0C857A] py-3 flex flex-row items-center justify-center',
child: WText(
'Use #0C857A for 4.51:1',
className: 'text-sm font-semibold text-white'
)
)
),
]
)
Stats
- Views
- 93
- Stars
- 0
- Revisions
- 1
- Size
- 9,262 chars
- Created
- Oct 8, 2026