UD5 Toolkit
Text to Braille Converter - Online Grade 1 & 2 English
Convert English text to Braille (Grade 1 and simple Grade 2 contractions). Educational tool to understand Braille representation. Local only.
Perceived Brightness Calculator - Online Luminance Formula
Perceived Brightness Calculator
Calculate the perceived brightness of a color using the standard luminance formula. Ideal for accessibility and design decisions.
Color Input
#
Preset Colors:
Brightness Result
0.65
Scale: 0 (black) to 1 (white)
Light Text
Sample Text
White on this color
Contrast ratio: --
Dark Text
Sample Text
Black on this color
Contrast ratio: --
Recommendation: Dark text provides better readability.
How It Works
The perceived brightness (luminance) of a color is calculated using the standard relative luminance formula from WCAG 2.0, which accounts for human eye sensitivity to different colors:
Y = 0.2126 * R + 0.7152 * G + 0.0722 * BWhere R, G, B are the linearized sRGB values (0–1) after applying gamma expansion. This formula gives a value from 0 (black) to 1 (white), indicating how bright the color appears to the average human eye.
For accessibility, WCAG recommends a contrast ratio of at least 4.5:1 for normal text. Our tool also calculates the contrast ratio against white and black based on this luminance value.
Frequently Asked Questions
Perceived brightness is a measure of how bright a color appears to the human eye, based on the way our eyes perceive different wavelengths. It’s not simply the average of RGB values; green contributes the most, blue the least.
We use the standard sRGB linearization and the WCAG 2.0 relative luminance formula:
Y = 0.2126 * R + 0.7152 * G + 0.0722 * B. This is the basis for calculating contrast ratios for web accessibility.
The human eye is most sensitive to green light, which is why green contributes about 71.5% of the perceived brightness. Blue, on the other hand, contributes only about 7% because our eyes are less sensitive to it.
Use the luminance value to determine whether light or dark text will be readable. If the luminance is above 0.179, dark text usually yields better contrast; below that, light text is preferred. Our tool also shows the contrast ratio against black and white to help you meet WCAG standards.
No, HSL's "lightness" or "brightness" (value in HSV) is a simple mathematical transformation and does not account for human perception. Our formula provides a perceptually accurate brightness measure suitable for design decisions.
WCAG Safe Palette Builder - Online Accessible Color Sets
Start with a base color and generate an extended palette where every shade contrasts properly with white and black. Export tokens.
Random Accessible Palette Generator - Online WCAG Safe
Generate a random 5‑color palette where every adjacent pair passes WCAG AA contrast. Safe for inclusive designs.
Live Site Contrast Checker - Online Audit By URL
Enter a URL and fetch its text/background colors to perform a bulk contrast check. See warnings for WCAG violations.
Real‑Sample Contrast Checker - Online See Paragraph
See how a full paragraph looks with your chosen text and background colors. Not just a ratio; the real appearance.
ARIA Graphics Roles Validator - Online Check SVG a11y
Paste an SVG and check if the graphic‑aria roles are used correctly. Improve accessible diagrams and icons.
aria‑describedby Visualizer - Online Check Descriptions
Highlight elements with aria‑describedby and see the linked description text. Verify a11y annotations.
Accessible Color Pair Grid - Online WCAG Matrix for Vision Deficiencies
Enter foreground and background colors and see a matrix of how each pair works for normal, protanopia, deuteranopia, and tritanopia.
Tab Order Visualizer - Online See Focus Navigation Path
Enter a URL and see a visual map of the tab order. Detect broken tabindex values. Improve keyboard navigation.
APCA Contrast Checker - Online New Accessible Perceptual Contrast
Check the Accessible Perceptual Contrast Algorithm (APCA) ratio. The next‑generation contrast method for WCAG 3.
Relative Luminance Calculator - Online WCAG Metrics
Enter a hex color and get its relative luminance per WCAG definition. Understand why this matters for contrast.
CSS Filter Functions Playground - Online Visual Adjustments
Chain multiple CSS filter functions and see the result on an image. Copy the filter string. No upload.
Landmark Region Viewer - Online See ARIA Landmarks of Any Page
Enter a URL and see a list of its ARIA landmarks (banner, main, nav). Check document structure for accessibility. Local fetch.
:focus‑visible vs :focus Demo - Online Accessible Outlines
See the difference between :focus and :focus‑visible on interactive elements. Learn which to use for better UX.
Color Contrast Ratio Tester - Online WCAG AA/AAA Check
Enter foreground and background colors to instantly see the contrast ratio and pass/fail for AA and AAA. Simple and fast.
Skip Navigation Link Generator - Online A11y Helper
Create a properly styled 'Skip to Content' link. Customize target and appearance. Essential for keyboard users. Copy the HTML/CSS.
Heading Structure Visualizer - Online Document Outline Check
Paste an URL or HTML and see the h1‑h6 hierarchy as a tree. Detect skipped levels and improve accessibility. Client‑side.
Accessible Color Scale Builder - Online Generate Tints/Shades with Contrast
Pick a base color and generate a 10‑step scale where each step meets a specific contrast ratio against white or black. Export as CSS custom properties.
contrast‑color() Preview - Online Automatic Text Color
Test the upcoming contrast‑color() CSS function. Get white or black automatically for a given background. See it live.
Bulk Color Contrast Checker - Online WCAG Validation
Paste a list of foreground/background color pairs and instantly see which pass AA/AAA. Perfect for checking entire style guides.
ARIA Attribute Validator - Online Check HTML Accessibility
Paste an HTML snippet and check for common ARIA mistakes: missing labels, invalid roles, and aria‑hidden misuse. Educate your team.
Image Brightness & Contrast Slider - Online Photo Tune
Quickly adjust the brightness and contrast of an image with live preview sliders. Download the tuned photo. Canvas.
Accessible Color Contrast Grid - Online Test Combinations
Enter a palette of colors and see a grid showing whether each foreground/background pair passes AA or AAA contrast. Must for designers.
Accessible Color Contrast Finder - Online WCAG 2.1 Helper
Given a background color, this tool suggests foreground colors that meet AA/AAA contrast ratios. Works for all vision types.
Focus Order Analyzer - Online Tab Navigation Check
Enter a URL and extract tab‐index order violations and focusable elements. Quick accessibility audit. Client‑side fetch.
Screen Reader Test Snippet - Online Check HTML ARIA Labels
Paste an HTML snippet and see how a screen reader might interpret it. Highlights missing alt texts and ARIA misuses. Educational.
Braille to Text Converter - Online Decode Dot Patterns
Enter Braille dot numbers (1‑6) or paste Unicode Braille to decode into English text. Companion to text‑to‑Braille.
CSS Filter Generator - Online Visual SVG Filter Builder
Interactively apply CSS filter functions (blur, brightness, contrast, etc.) to an image and copy the resulting filter property. No coding required.
Color Blindness Simulator - Online Vision Deficiency Preview
Simulate how images and UI elements appear to users with various types of color blindness. Upload or paste image URL. Promote inclusive design.
Color Contrast Checker - Online WCAG Accessibility Validator
Check the contrast ratio between foreground and background colors to ensure web accessibility compliance. Get WCAG 2.1 AA/AAA pass/fail results instantly.