CSS Accent Color: The Key to Stunning Form Design – A Complete Guide

The web paradigm has changed considerably over the last few years. Web 2.0, a term coined way back in 1999, was one of the pivotal moments in the history of the Internet. UGC (User Generated Content), ease of use, and interoperability for the end-users were the key pillars of Web 2.0. Consumers who were only consuming content up till now started creating different forms of content (e.g., text, audio, video, etc.).

Online businesses, irrespective of the scale/size, had to adapt to the rapid shift in technology. We have witnessed how web development has played a pivotal role in the evolution of online commerce (or e-commerce). Web pages that were earlier created and styled with HTML now became a thing of the past. CSS (Cascading Style Sheets) & other front-end technologies like React, Angular, etc., are now mainly used for styling purposes.

Styling and performance have become ultra-important for improving all the essential KPIs of the website. Talking about styling, how can we ignore web forms – a medium that captures user input? For example, you will have to create an account on Gmail to use Google’s mail functionality. The same principles also apply to all forms of businesses (e.g., e-commerce, SaaS, etc.).
In this blog, we dive deep into styling aspects of input forms by making the ideal use of the CSS accent color property.

The Color Theory: Color Wheel

As discussed so far, colors play an important role in web design. A wrong choice of color or widespread usage of multiple colors could shy users away from your product.

Let’s dive deep into what are primary, secondary, and tertiary colors.

Primary Colors

Primary colors are the standard/source of the wheel. These colors are not created by other colors. These colors are RGB (Red, Green, and Blue) in format.

Primary color wheel

Secondary Colors

Secondary colors are created by mixing two standard colors in equal proportions. A few examples are shown below:

• Red + Blue = Purple
• Red + Yellow = Orange
• Blue + Yellow = Green

Secondary color wheel

Tertiary Colors

Tertiary colors are created by mixing primary and secondary colors in equal proportions.

• Red + Orange = Red-Orange
• Red + Purple = Red-Purple
• Yellow + Orange = Yellow-Orange
• Yellow + Green = Yellow-Green
• Blue + Green = Blue-Green
• Blue + Purple = Blue-Purple

Tertiary Colors

Color Model

Color model is a system that uses primary, secondary, and tertiary colors to produce an extensive range of colors.

Many models can produce a variety of colors so they can fulfill different purposes.

RGB Model

The RGB (Red, Green, Blue) model is based on the science of light, i.e., how our eyes interpret the colors. Colors can take a range of values from 0 – 255. Because of good color combinations, this model is ‌used in video or screen-based design, e.g., TV and video games.

Color model image of RGB

CMYK Model

CMYK (Cyan, Magenta, Yellow, Black) is primarily used in mainstream publications, e.g., books, magazines, etc.

The combination of Color Wheel and Color Model helps in evaluating the best color scheme for your website. The combination of Color Wheel and Color Model is also referred to as Color Harmony.

Color Harmony

The best way of selecting a color variety or palette is by using the color wheel and applying the principle of analogous, complementary, monochromatic, and triad color.

Source

Analogous

Depending on your needs, select any three consecutive colors on a 12-part wheel.

Complementary

Choose any two colors which are directly opposite to each other.

Monochromatic

Select any one color and then use their tints (different shades).

Triad

Choose a color that makes a triangle in the color wheel.

How to choose a Color?

The selection of color depends on the looks of the website or personality.

We can classify all these websites into different categories like e-commerce websites, small businesses, personal, portfolios, etc. Similarly, we can categorize different websites’ personality traits based on what they want to offer.

Here are the seven major categories (or traits) of websites.

Serious / Elegant

Websites with this personality type follow a classy web design that exudes luxury. Web page design based on thin serif-typefaces, golden, pastel, black, dark blue (or gray colors), and big-high-quality images are characteristics of this type of personality.

These websites best suit the following industries:

• Real Estate
• High Fashion
• Jewelry
• Luxury brands, and services

Example:

Minimalist / Simple

Usually, a single color is used throughout the design.
Websites with this personality type follow a simple web design with very few resources (e.g., images, buttons, etc.). The overall design is based on the essential text content and uses small (or medium-sized) Sans-serif black text, lines, and a few images and icons. Such websites use a black or dark gray color on a pure white background.

These websites best suit the following industries.

• Fashion
• Portfolios
• Software Startups

Plain / Neutral

Websites with this type of personality follow a design that gets out of the way by using very neutral and plain web design. It is based on using small typefaces and a boxy, structured, and condensed layout. They used safe colors, nothing too bright or too washed-out. Blues and blacks are commonly used in these cases.

Such an approach is best-suited when you want the major focus to be on the respective product (or service). For example, the Google Search page or DuckDuckGo Search Page focuses only on the core functionality – Search.

Bold / Confident

Websites designed keeping an old/confident personality in mind follow more prominent and bold typography. That is paired with the confident use of multiple big bright colors. Big color blocks/sections are used to draw attention.

These websites best suit the following industries:

• Digital agencies
• Travel

Calm / Peaceful

Websites with this type of personality focus on consumer well-being (e.g., health and wellness businesses). You would see wide use of calming pastel/washed-out colors like light oranges, yellows, browns, greens, blues, and soft serif headings.

The colors provide a strong message that the respective business holds strong values and truly cares a lot about its customers.

These websites are best suited for the following industries:

Startup / Upbeat

Websites with this personality type follow a modern web design that shows technology and 3D illustrations. Web page design is based on medium-sized Sans-serif typefaces, light-gray backgrounds, Blues, greens, and purples.

There is extensive use of gradients and light backgrounds.

The website design of many software startups is based on the said personality. Grammarly and Stripe use this personality.

Playful / Fun

Websites with this type of personality follow a fun web design that shows love and affection to the users. Kids websites, online pet stores, etc., use this personality.

The design is based on colorful and rounded designs. You would find extensive usage of creative elements like hand-drawn icons or illustrations and CSS animations.

What are Accent Colors?

When we develop a website, we always need to think about the brand or message that we want to convey through websites. Brand colors are fundamental since they become a large medium of brand recall to its current & prospective customers.

One approach to realize this is choosing a brand color and sprinkling it on important parts of the website in a very subtle way. This also enhances the website experience. This method is called “Accent” color because it sets the website’s accent.

We can do this by showing brand colors in the title of the websites, hyperlinks, and different HTML elements like text inputs, checkboxes, radio, slider, progress bar, etc.

Let’s take an example and see the default way to style the input elements on a form.

HTML:

CSS:

See the Pen
code_1 by ravi kumar (@ravikumar7210)
on CodePen.

As we see in this example the color of the input elements is Blue, but we styled it as per the requirement of the brand color. Another reason is that default colors don’t align with the brand color.

Traditionally we do not have any methods to style it, so developers use a well-known approach by removing the default input elements and creating a new one by using pseudo properties like :before and :after. These properties help in customizing the components.

HTML:

CSS:

See the Pen
Code_2 by ravi kumar (@ravikumar7210)
on CodePen.

This approach can be used when you want to fully customize input elements with animation, shadow, or any other effects. In many cases, no fancy styling is required, instead, you just need to apply the brand color and style to other elements.

You require good knowledge of CSS to make the most out of this approach.
Having said that, let’s start with styling HTML Input elements with CSS accent color properties.

CSS Accent Color property

accent-color is a property used to customize HTML forms with controls like radio, progress, checkbox, and category. The color of this property is blue by default.

Syntax

accent-color: auto|color|initial|inherit;

Values:

• Initial value: auto (default value. The browser chooses the CSS accent color). The property applies to all elements
• Inherit: yes (Inherits this property from its parent element)
• Computed value: auto is computed as specified, and values are computed as defined for the color property.
• Animation type: Computed value type

Working with specific form controls

Only four specific form controls to support the accent-color property:

• checkboxes (< input type="checkbox" >)
• radio buttons (< input type="radio" >)
• range (< input type="range" >)
• progress (< progress >)

Let’s take an example and apply CSS accent color property in all the input elements. We can do this by applying CSS accent color in the root section to apply the same color on all the web pages.

HTML:

CSS:

See the Pen
code_3 by ravi kumar (@ravikumar7210)
on CodePen.

Different CSS Accent Color on a different form of the same web page

That’s not all; we can also apply different CSS accent colors to different forms of the same webpage. Let’s look at an example.

HTML:

CSS:

See the Pen
code_4 by ravi kumar (@ravikumar7210)
on CodePen.

CSS Accent Color on individual form elements

We can also apply accent-color to individual form elements, let’s see an example.

HTML:

CSS:

CodePen:

See the Pen
code_5 by ravi kumar (@ravikumar7210)
on CodePen.

Smart Feature of CSS Accent Color

The CSS accent color property has an interesting feature whereby the browser automatically finds the best color for the checkmark, range, and progress bar elements on the page. This is done to ensure the best color contrast is derived automatically, due to which no additional code is required on the styling front.

In the below example, we apply different CSS accent colors to the different forms.

HTML:

CSS:

CodePen:

See the Pen
demo_6 by ravi kumar (@ravikumar7210)
on CodePen.

As seen in the output, we have dark color in the first form whereas the other form has a white color.

These results are dependent on the rendering engine used by the browser as well as the user preferences set in the browser. It also depends on the choice of CSS accent color.

If we choose a light color like Green (#00FF00), we get a dark background. However, we get a light background if we choose a dark color like Red (#FF0000).

Working with color schemes

The CSS accent color property also supports the color scheme property. For example, if a user sets the web page or OS system color scheme to light, the browser evaluates the CSS accent color value and determines the appropriate color scheme for the UI.

With this approach, color contrast between the browser’s UI and accent- colors are perfectly set!

Each browser has its way of calculating the UI color (which color to use). Color scheme property helps to set user preference for light and dark modes. We can do that with the help of a color scheme media query.

There are two color schemes – one is dark mode, and the other is light mode.

Why light and dark modes?

Light and dark modes will be synonymous for mobile phone users, and it is known that the light emitted from screens can harm your vision. This is where dark mode comes into the picture. The dark mode reduces the light emitted by the device screen while ensuring that the minimum color contrast ratios are maintained for readability. That’s not all, usage of dark colors (particularly black) extends the battery life.

As per the worldwide search trends report, the “dark mode” phrase gained significant momentum when it was released on Android and iOS. It peaked in 2019!

As per a survey report by Android Authority, close to 95% of the participants prefer dark mode on their system.

Source

Usage of dark mode results in reduced eye strain, owing to which users tend to spend more time on their devices. This, in turn, also benefits the websites that have options to switch to dark mode since that might result in an increased time spent on the website. Better engagement means higher chances of conversions!

However, the dark mode may also provide accessibility benefits for users with photophobia, keratoconus, or other conditions that cause light sensitivity. To keep your apps and websites accessible to everyone, consider giving users the option to switch between light and dark modes, allowing them to select the setting that best suits their needs.

The best part is that accent-color works like a charm with dark and light modes. Hence, you do not need to have separate implementations for different modes.

CSS Accent Color with Color scheme

Above we already discussed various modes of color scheme. Let’s start understanding the working of color schemes with CSS accent colors. The color of web page elements changes according to the theme of the web page.

We can use a color scheme according to the user’s preference if the user chooses or sets a dark mode. In that case, we will use a media query (prefer-color-scheme property) that is set to the user’s choice, like in the dark or light.

Let’s look into the example:-

If the user’s preference is set to ‘dark,’ this renders white text on a black background:

If the user’s preference is set to ‘light,’ this renders white text on a black background

By this method, we can set the UI color with the user’s preference. This method only toggles between dark and white mode, so we also need to use the CSS accent color property to apply color on the form controls (checkboxes, radio, etc.) We can do this by applying the CSS accent property to the root method to all page elements.

Alternatively, we can apply it in the HTML using the meta tag.

This method is the most preferred way of applying a color scheme because HTML renders before the CSS, and it is swift, so there is no delay in showing the color and style of the UI.

Color scheme affects the user preference styles. Suppose we use it without providing other background colors or text color styles for the page. In that case, the default colors of the page are going to be inverted if the user selects a dark combination — therefore, the default background color is black, and also the text color is white. In practice, we’ll likely want to override these with CSS. For this, we can use color-scheme alongside the prefers-color-scheme media query

Sometimes in our design, there are some areas where we want to retain a specific color scheme, regardless of whether a light mode or dark mode is toggled in that condition, we use a color-scheme property alone.

We already know that CSS accent colors support color schemes to tint both the light and dark elements according to their calculation.

So let’s look at the example of form controls. In the following example, the user has one dark theme and one light theme active, the page uses color-scheme: light and uses the same accent-color: deeppink (#ff1493) for dark-themed deep pink tinted controls. Let’s look at the below example.

HTML

CSS

CodePen:

See the Pen
code_7 by ravi kumar (@ravikumar7210)
on CodePen.

In the above example we get different contrast in the various modes, so to prevent inaccessible elements from existing, browsers with CSS accent color have to determine an eligible contrast color to be used alongside the custom accent. Below could be a screenshot demonstrating how Chrome (L) and Firefox (R) differ in their algorithms:

Source

Different approach to style other form controls

As we know, only four elements support CSS accent color, so we need to think about other ways to style other elements because it takes time to enhance the working of CSS accent color. Therefore, another way of styling the checkbox or radio button is to hide the default property using the -webkit-appearance: none property. After that, we can create our checkboxes and style them using our methods.

Another approach is that we do not have to return to the traditional approach, thanks to Adam Argyle and Joey Arhar. They created a code snippet that helps to style popular form controls like markers, selection, and visible focus: property

Let’s take an example to see this in action:

HTML:

CSS:

CodePen:

See the Pen
code_8 by ravi kumar (@ravikumar7210)
on CodePen.

Accessibility for CSS Accent Color

The CSS accent color property is very helpful for browser accessibility.

The Web Content Accessibility Guidelines (WCAG) describe how to make web content more accessible to individuals with impairments. These guidelines are defined by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C).

Before that, we should take care before changing the focus style when using the hiding property, which can change the default appearance of form controls.

Now with the CSS accent color, we should not have to think about this because it is accessible to the browser. That is why it should not hide the browser defaults and preserve accessibility.
The CSS accent color property is well-supported in the latest Chrome and Firefox versions.

In the upcoming future, with the increment of technology support or additional work with this property, it is well supported in the future. If your browser doesn’t support CSS accent color, it will get the browser defaults, so it works great as a progressive enhancement.

Source

Browser compatibility testing of CSS Accent Color

Once you have designed your web app using CSS accent color, it’s imperative to test it on different browsers and OS combinations for cross-browser compatibility. A cross-browser-compatible website is a website that renders perfectly across browsers and operating system combinations.

Performing tests across different browser-OS combinations can be time-consuming and expensive if you build your in-house test infrastructure. However, cloud-based testing platforms like LambdaTest make your life easier. It lets you perform manual and automated cross-browser testing on an online browser farm of 3000+ real browsers, devices, and OS combinations. In addition, you can also perform accessibility testing of your CSS web apps that uses CSS accent color property.

Shown below is the rendering of the CSS accent color on LambdaTest’s Real Time Testing.

Check out the tutorial below and get started with real-time testing on the LambdaTest platform.

Subscribe to LambdaTest YouTube Channel and get detailed tutorials around Selenium automation testing, Cypress testing, and more.

Limitations of CSS Accent Color

The CSS accent color helps developers ease their work. As we discussed in the blog, many elements do not support accent colors, but this property might be helpful in the future. Another point is that we are limited to applying color to checkboxes and radio buttons. We do not consider the color schemes from which we can style checkbox borders, but we can still not fully customize these forms’ controls.

It would be great if we customized the border radius and border color of the checkboxes and the thickness of the input in its unchecked state. Now accent colors are only limited to work only in the checked state. It would be great to change its style to an unchecked state. Also, it would be very helpful to add animation to it. It would be great if border property could take the value of its parents (inherited property). We are very far from this upgrade on this property.

Currently, the accent color is only limited to four form controls, so it would be great if the accent color properties extended beyond form controls like video controls and the other form control elements. For a developer, creating custom controls is very difficult and takes a lot of time. So, for the betterment of the UI and to ease the developer’s work, accent color properties need to be modified.

Conclusion

In this article, we discussed the traditional methods of styling form controls and how difficult it is to style a form. To make our job easier, a new property called CSS accent color comes, which helps us to style checkboxes and radio buttons more quickly.

We also discussed the color scheme and how it helps to improve accent color and form control styles. So, in the end, the CSS accent color property is essential and helpful for developers to style the form controls and make their work easier. So definitely use this new property and style form controls and create new beautiful forms.