Skip to content Request a project consultation

Take a look at the landing page · 033 landing page brand color accessibility

I highlighted everything, but I don't know where to press.

Approximately 4 minutes to read BlueCanvas

How many brand colors should I choose?

There is no set number. Role comes before quantity. The job of the paper, dividing lines, and letters is to make them inconspicuous, and the highlight color is only used in the one place that needs to be pressed. The font color above the accent color is selected by measuring the contrast.

Key takeaways

  • If you give each important thing a color, there will be multiple places on the screen that say “click here” and the most important place will disappear.
  • The order of reduction is based on role, not number. All you have to do is keep the paper, dividing lines, and letters quiet, and use the highlight color only in one place that needs to be pressed.
  • Once you have decided on an accent color, choose the color of the text above it by measuring the contrast. On Orange D97757, the white letters are 3.1 to 1, and the ink letters are 5.9 to 1.

Which is the contact button on this screen

There are four buttons, each in a different color. Blue contact us, green details, yellow check price, pink event application. Screen in four places simultaneously 「Click here」It says, and the visitor has to find out where to press on their own, not on the screen.

This is because each important thing is given a color. I wanted to emphasize the event, I wanted to emphasize the price, and I wanted to attract inquiries.

No one chooses nine from the beginning

If you open one of the reproduction screens and count the colors, there are nine. These are the logo, inquiry button, auxiliary button, three card heads, event badge, consultation link, and company introduction link. Instead of choosing nine, The result is that for each banner or badge attached, one color follows.no see.

This screen is not an actual customer, but a reproduction screen modeled after a common configuration.

Decide on roles before counting.

Deciding how many colors to reduce is a matter of reversing the order. First, decide what each color does.

roleValues ​​on this pageto do
surfaceFAF9F5Covers most of the screen. You shouldn't stand out.
contourE3DACCJust divide the space.
letter141413It just needs to be read. Colors don't speak for themselves.
stressD97757Paint only on the one spot that needs to be pressed.

I'm not giving you a rule about how many colors there should be. There are four palettes in this video, and emphasis is one of them. What is important is not the number, but that the emphasis is in one place.

The letters above the accent color are selected by measuring the contrast.

Once you have decided on the highlight color, you will be left with the text color to place on top of it. Don't pick by eye, measure contrast. If calculated using the relative luminance formula of WCAG 2.1, it is as follows.

mixturecontrastBody size font size: 4.5:1
White letters FFFFFF / Orange D977573.1 : 1It's not enough. Only 3:1 based on large letters will pass.
Ink letters 141413 / Orange D977575.9 : 1It passes.
Ink letters 141413 / Cream FAF9F517.5 : 1It passes.

There are many cases where you can pass the exam by keeping the same brand color and just changing the font color. However, this value is for the above combination. Large text, icons, and inactive elements have different standards and must be measured again on the actual screen.

What we're going to do today is not reduce the color

open a screen Pick the one button that's most important to you. Then, subtract the color from the other spot where that color was painted. These are places such as the top event banner, price highlighting badge, and auxiliary buttons within the text. It's easy to read just by leaving a border.

If there is only one accent color left, that is pressed. The count will be sorted out automatically afterwards.

This is a look at BlueCanvas’ landing page. You can check the included items and estimated amount on the cost estimate screen.

Full video subtitles (5 scenes)

Which is the contact button on this screen

Which button is the Contact Us button on this screen? There are four of them, all in different colors. This is because each important thing is given a color.

The result was not selected, but increased one by one.

No one chooses nine colors from the beginning. The colors increase with each banner or badge attached. There were nine on one screen.

Before counting, start with the roles

The order of reduction is based on role, not number. The job of the paper, letters, and dividing lines is to not be noticeable. The highlight color is only used in the one place where you are asked to press.

Repaint and measure contrast

The same screen was repainted according to its role. There is only one button with an accent color: Inquiry. Do not choose the letters on the accent color by eye, but rather measure the contrast.

Pick the one button that matters most

Instead of reducing the colors today, just decide on one thing. What is the most important button on this screen? If you take that color out of its place, the organizing begins there.

Frequently Asked Questions

How many brand colors are appropriate?

There is no set number. Role comes before quantity. The paper, dividing lines, and letters are quiet, and there is only one highlight color used in the place where you need to press. There are four palettes that this page uses, one of which is emphasis.

Is it better for the text on the accent color: white or black?

Each color is different, so choose by measuring the contrast. On the orange D97757 used here, the white letters are 3.1 to 1 and the ink letters are 5.9 to 1, so the ink side passes the text standard of 4.5 to 1. Other accent colors must be recalculated by adding that color.

The event banner also needs to stand out. Can I leave out the colors?

This doesn't mean you should erase the color, but it means that you should only place the accent color in one place. Banners can be made to stand out with borders, background contrast, position, and size. Deciding first what is the most important action on a screen determines the presentation of the rest.

Check the included items and estimated cost on the screen

The design scope and included items are displayed literally on the mock quotation screen. If you click on the conditions in BlueCanvas' cost estimate, you can check it along with the estimated price.

Try a cost estimate
A page where no screen appears even when you click on apply for consultation After sending the inquiry form, I opened 202 locations to check what should be shown. 7 essential items in our inquiry form We confirmed with our verification code what must be received from the form.

Other short form insights

Visual AI 는 이야기를 먼저 정리한 뒤 AI 로 장면을 만듭니다 숏폼 영상 표지

Introduction to BlueCanvas tools

Visual AI 는 이야기를 먼저 정리한 뒤 AI 로 장면을 만듭니다

영상 한 편을 만든다면 어디서부터 시작해야 할까요? 더블루캔버스 Visual AI 는 장면보다 이야기를 먼저 정리하고, 인물 35명을 하나씩 준비한 뒤 하나의 브랜드 영상으로 합칩니다. 영상 속 예시 이미지는 고객 사례가 아닙니다.

Learn more →
Use ImgView to flip through photos in folders and compressed files without unpacking them. Short-form video cover

Introduction to BlueCanvas tools

Use ImgView to flip through photos in folders and compressed files without unzipping them.

Does the program you open to view a single photo have to be heavy? BlueCanvas ImgView lets you move through folders with the direction keys and view images in compressed files without unzipping them. It's free with no ads or embedded programs.

Learn more →
Divide one-time expenses and recurring expenses into one column Short-form video cover

1 minute of practical work from the boss

Divide one-time and recurring expenses into one column

If you set next month's budget as this month's total, even the items you bought will be budgeted again next month. I added a column to classify the items and organized the order in which I look at every other month.

Learn more →

See all short form insights→