For WCAG Level AA, normal text generally needs a contrast ratio of at least 4.5:1. Large text needs at least 3:1. User interface components and relevant graphical objects also generally require a minimum contrast ratio of 3:1. However, requirements may vary based on content and accessibility criteria.
Colors & CSS
Color Picker
Pick colors and copy HEX, RGB, or HSL values.
- 100% Free
- Customizable
- Download
- Unlimited
Gradient Generator
Build CSS gradients with live preview.
- 100% Free
- Customizable
- Download
- Unlimited
Box Shadow Generator
Design layered box shadows visually.
- 100% Free
- Customizable
- Download
- Unlimited
Border Radius Generator
Tune corner radii and copy ready CSS.
- 100% Free
- Customizable
- Download
- Unlimited
Contrast Checker
Check WCAG contrast between two colors.
- 100% Free
- Customizable
- Download
- Unlimited
Select suitable colors, check their readability, and create CSS snippets to use on your website or any other application. Whether you are a developer, designer, marketer, or a beginner working on something with no proper resources or access to online colors in one place, this tool will prove to be very useful. Toolflora’s Colors and CSS tools can help you with landing pages, styling, or creating a unique or personal color palette.
What Can You Do Here?
PICK AND CONVERT A COLOR
Explore the Color Picker tool from Toolflora for your websites, logos, backgrounds, or when you need the perfect color. Work with common color formats, including HEX, RGB, and other supported formats.
It can help you select suitable colors for your website or design, convert colors between supported formats, or find HEX or RGB values. You can also experiment and create your own color or gradient using values.
CHECK IF IT IS READABLE
Choosing a color combination that best suits where you use it is important, as it affects readability. Toolflora’s Contrast Checker helps you choose the best color combo and check whether it is perfect for where you need it.
Whether you want to fill text based on the website’s background, button text or colors, headings, paragraphs, form fields, interface components, or simply want to test the colour combinations.
GENERATE CSS YOU CAN COPY
Toolflora provides tools that help create CSS properties and let the user copy them rather than writing CSS manually.
The Gradient Generator tool helps create gradients with an easy-to-use interface where you can set directions, choose from linear or radial gradients, and use other available settings.
The Box Shadow Generator tool helps you adjust shadow placement, blur, spread, and opacity when you need a shadow effect for your buttons, cards, or other elements.
The Border Radius Generator lets you create rounded corners by adjusting radius values for containers, images, buttons, and other components.
Which Tool Do I Need?
| What You Are Trying To Build | Tool |
| Find a HEX or RGB value for a colour | Color Picker |
| Check whether text is readable on a background | Contrast Checker |
| Create a colourful background effect | Gradient Generator |
| Add depth to cards or buttons | Box Shadow Generator |
| Make buttons, images, or cards rounded | Border Radius Generator |
Meeting WCAG Contrast In Practice
Understanding the Web Content Accessibility Guidelines (WCAG) helps you understand the contrast requirements for different types of text. The reason is that if the colors mismatch with the background, it may kill the whole vibe of the website, which leads to some users’ confusion in terms of information, navigation, or understanding the content, which may cause them to disconnect from the website or content.
Minimum contrast requirements:-
| Content | Minimum WCAG Contrast |
| Normal body text | 4.5:1 |
| Large text | 3:1 |
| User interface components and graphical objects | 3:1 |
Why Your Brand Color May Need Another Version
Your brand becomes memorable by the colours you use for your logo. Think of McDonald’s: what colours come to mind? Or Starbucks- yes, green and white. Colours become central to your visual identity; that’s why focusing on them really helps you make something visually attractive and memorable.
You can select the best combos from the colour picker, then use the contrast checker to know if your shades match together or not. That’s how you can visually attract your customers or users in the first place.
To make the approach practical, use the existing brand’s colours to fill the decorative areas appropriately. Continue by selecting darker versions of your colours for the text and a contrasting background behind it. Test hover and normal states to see which suits better.
Frequently Asked Questions
What contrast ratio do I need to pass?
Can I use these gradients and shadows commercially?
Of course, you can, as CSS gradients, box shadows, and border-radius are standard styling techniques that you can generally use in commercial websites and projects. Check the terms of any external resources you use.
Why does my colour look different on another screen?
Colours depend on screen brightness, display calibration, colour profiles, device settings, and browser rendering, and can also be affected by lighting conditions. To avoid any issues, test your colours on more than one device and check contrast using colour values rather than relying only on visual appearance.
Can I use the generated CSS directly on my website?
Yes, you can use the generated CSS directly on your website by simply copying it or adding it appropriately to an HTML element, but always check a few things like the selector, property values, and surrounding CSS before publishing to avoid any issues.
Do I need to know CSS to use these tools?
No, the tools are meant to be used by all, from beginners to experienced developers. Even with basic CSS knowledge, you can customise the generated code or integrate it into a larger project.