Recommend
29 
 Thumb up
 Hide
19 Posts

Wargames» Forums » General

Subject: Contrast ratios in wargame design rss

Your Tags: Add tags
Popular Tags: [View All]
Cisco Serret
United States
Austin
Texas
flag msg tools
OverText
badge
WOOF!
Avatar
mbmbmbmb

I was reading some dry stuff on best practices for web design, when I ran across something that immediately made me think of an irksome problem I find with many wargames.

Of course, this required me to stop working, in order to make a very important post to BGG. whistle

Even though art design in wargames has vastly improved over the decades - sometimes I still see poor selections in background color/text colors in new games.

In this chart (for web design) you can see there is actually a scale used to measure readibility as related to background color and foreground text color. Even though this is in black & white, the point is still evident.



Apple's guidelines for app design is at least a ratio of 7.1 (even though Apple violates that rule often themselves).

In many wargames, the ratios for some counters and charts is near unreadable.

I often have to scan in charts and fiddle with the contrast so that I can actually read the numbers on a chart from a distance of 4 or 5 feet.

I like to attach charts to standy-uppy paper holders things so they are easy to reference without danger of me inadvertently using the chart as a very effective counter swoosher.

In photoshop I can increase the contrast on charts to where its easier for me to read, then I print that out and put the original charts away. Sometimes I do that for counters too, but thats rather labor intensive and I'm rather grumpy when I have to do that to play a game I paid for. Charts I don't mind so much, cause its easy, and it seems putting dark backgrounds behind black text is a fad these days. But I sometimes wish charts would just be black and white.

I'm sure for younger people with youthful eyes, this complaint seems silly. But when you get older, our eyes need all the help they can get.

Heres some examples of "too low" contrast ratios.



43 
 Thumb up
5.38
 tip
 Hide
  • [+] Dice rolls
Ivor Bolakov
United Kingdom
flag msg tools
Avatar
mbmbmbmbmb
On a related note, via the excellent accessibility teardowns on http://meeplelikeus.co.uk, a little bit on colour blindness which affects a surprising number of us: http://mkweb.bcgsc.ca/colorblind/.
12 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Cisco Serret
United States
Austin
Texas
flag msg tools
OverText
badge
WOOF!
Avatar
mbmbmbmb
I see all the Spocks! laugh
I didn't know there were some people with "extra" color powers.
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Canada
Ottawa
Ontario
flag msg tools
mb
OhBollox wrote:
On a related note, via the excellent accessibility teardowns on http://meeplelikeus.co.uk, a little bit on colour blindness which affects a surprising number of us: http://mkweb.bcgsc.ca/colorblind/.


My current pet peeve is with the counters in Jours de Gloire Aspern-Essling. Formation identity is indicated by a coloured band on the counter. There's an orange and a red that I have to compare side-by-side at nose distance with a million lumens of illumination to distinguish. Not quite as bad but still problematic are a royal-blue and a purple. I fail to understand the colour selection. I can only hypothesize they seemed fine to the artist looking at the counters on his monitor, zoomed in at 1000%.
10 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Russ Williams
Poland
Wrocław
Dolny Śląsk
flag msg tools
designer
badge
Avatar
mbmbmbmbmb
Cisco Serret wrote:
I was reading some dry stuff on best practices for web design, when I ran across something


Was it this:
https://backchannel.com/how-the-web-became-unreadable-a781dd...
?


I just found that (linked via http://www.telegraph.co.uk/science/2016/10/23/internet-is-be... )
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Andy Leighton
England
Peterborough
Unspecified
flag msg tools
Avatar
mbmbmbmbmb
Cisco Serret wrote:

I'm sure for younger people with youthful eyes, this complaint seems silly. But when you get older, our eyes need all the help they can get.


Not just that but some people also play games in community halls or other places with less than ideal lighting that you can't easily improve. Not just those places which are not light enough, but those with lights that have a very off 'temperature' which alters how people perceive colour.
3 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Mike Toot
United States
Seattle
Washington
flag msg tools
badge
Avatar
mbmbmbmbmb
Mark Mokszycki, designer of Operation Dauntless: The Battles for Fontenay and Rauray, France, June 1944, analyzed the game components for colorblind viewability and made adjustments accordingly before publication.
5 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Cisco Serret
United States
Austin
Texas
flag msg tools
OverText
badge
WOOF!
Avatar
mbmbmbmb
russ wrote:


yep thats the link that got me to the page with the image.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Cisco Serret
United States
Austin
Texas
flag msg tools
OverText
badge
WOOF!
Avatar
mbmbmbmb
SailinDude wrote:
Mark Mokszycki, designer of Operation Dauntless: The Battles for Fontenay and Rauray, France, June 1944, analyzed the game components for colorblind viewability and made adjustments accordingly before publication.


I have that game. Everything looks awesome in it, and I can read the counters. Haven't had a chance to get it to the table yet though.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Cisco Serret
United States
Austin
Texas
flag msg tools
OverText
badge
WOOF!
Avatar
mbmbmbmb
andyl wrote:

Not just that but some people also play games in community halls or other places with less than ideal lighting that you can't easily improve. Not just those places which are not light enough, but those with lights that have a very off 'temperature' which alters how people perceive colour.


Last night at game night at a pub I setup a game on a table but we quickly filled up on players (Falling Sky). Soon 4 more people showed up to play, but there wasn't any table space left due to a gaming event being run on the rest of the tables. But they said they could play outside on the tables they have there, so I gave them my copy of 1775 to play. Later I went outside to see how they were doing. The lighting was terrible - basically the lighting came from inside the store through the windows, and some very dim bulbs high up on the canopy. Yet they were having alot of fun. I wouldn't have been able to see well enough to play. Young people and their night vision. ninja
4 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Wroderick Burke
United States
Las Vegas
Nevada
flag msg tools
mbmbmbmb
Such a brilliant topic! There is so much I would like to say but will try and keep it as short as I can but that may be impossible. Honestly topics like these is why I desire to work in the tabletop gaming industry once my son is older. At this point in my life I'm a SAHD till he is ready for me to return to work.

A brief background on myself is that I am a former freelance graphic designer from the Casino industry. Since I grew up in Vegas it couldn't be helped that a majority of my clients were involved in the gaming industry. Over the years I provided commercial photography, promotional material, video editing, content creation, and of course graphic design for physical table games. My work was used in resorts around the US as well as the Hard Rock Casino here in Las Vegas.

When it comes to designing for accessibility there is nothing stricter than a Casino resort. Millions of dollars is handled just in your typical game of Black Jack so the designer has to do it right. A table layout, fonts, and its colors has to be designed not only for the patrons in mind to understand and read but also for security guards and staff who are observing through ceiling cameras in a complex environment. Security has to be able to read the table from a distance or on footage regardless of angle so that they can monitor every single detail. Casinos even require special lighting methods that can affect the color of the tables to remove possible room shadows and environmental factors.

Now here is where my personal theories and bias creep in on how design to print has changed. Like the original poster I also had a accessibility class in college way back in 2004 for web design. It helped that I was a fine artist turned commercial artist with years of color theory drilled into my brain from both fine art and commercial fields. My wife who is 8 years younger than I is also an artist who went farther than I did to get a BA in college. She unfortunately did not receive the depth of education I did when it came down to the subject of using color which in all aspects is a science. I was taught color theory is a very strong psychological communication language that goes past all education and spoken language barriers.

The reality is knowledge to print product that is accessible by all has been with us long before I was even born. Unfortunately over the years the traditional education and finances to pay the more experienced to do it right is gone. I watched my job bids of $2400 quickly turn to $140 almost over night which is why I quit. Too many people started doing graphic design work in Photoshop for print which is a program that should never had been used that way. This is coming from a person who uses Photoshop for "art" and "photography" assets since version 2.5 but uses Illustrator and vector programs for graphic design and communicating.

Allow me to share with you all how my work was done and why I feel the board game industry may have been forced to cut corners which hurts accessibility. My client would contact 2-3 commercial printers and put in a request for a printer sample. It would cost them between $200-$400 for just one sample from a printer. So by the time they had contacted two or three they had already paid between $600 to $1200 US just for printer proofs. These 4x4 foot and sometimes 4x6 foot prints came on an off-white canvas type material that I would hang around my office showing all the color outputs and hex codes that printer was capable of. The cloth prints were made to compensate for environmental lighting that proofs on paper can not do.

My job after designing a table would be to color match the colors of my design with the color swatch on the printer's sample. I would then go back to Illustrator and change the color code of my design so that the finished printed design was "exactly" what the client ordered. One mistake just off a different shade of blue would cost my client at least $600 in reprinting just for one print. Hex color codes on printer samples and what the software has never match and no two printers have the same color values either. Color match has to be done by human eye.

Photoshop has to consider your own personal monitor settings, color profiles, and has the lack of being able to change colors to match print outputs of the whole design with ease. Traditional commercial printers scream at the file sizes when they have to make printing plates and it's never promised what you send is what you will get back. Brightness and contrast is not a thing used in vector art. I made more money "fixing" a design done in Photoshop for a commercial printer than I would have charged to do the entire thing from scratch. It's also why many great games have small fonts. The wording just doesn't scale properly if it's not done right in Vector formats and that's a whole new topic reserved for properly type setting.

So in nutshell I will be 40 this year. The people who are older and retired in these fields knew so much more than me. It's just gotten way too cheaper to do great art and design the wrong way. Working digital is great but it can turn great work into a mess for a company and its consumers if done improperly. And the crazy part is those who know nothing about art or design can tell something is off even if they don't have the experience or words to say it. They feel overwhelmed or the game is too "busy" and are quickly turned off.








12 
 Thumb up
5.05
 tip
 Hide
  • [+] Dice rolls
401k? More like .357
United States
Baltimore
Maryland
flag msg tools
badge
Avatar
mbmbmbmbmb
White-on-black glorifies the SS.

 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Cisco Serret
United States
Austin
Texas
flag msg tools
OverText
badge
WOOF!
Avatar
mbmbmbmb
Turnbasedlife wrote:
A table layout, fonts, and its colors has to be designed not only for the patrons in mind to understand and read but also for security guards and staff who are observing through ceiling cameras in a complex environment. Security has to be able to read the table from a distance or on footage regardless of angle so that they can monitor every single detail. Casinos even require special lighting methods that can affect the color of the tables to remove possible room shadows and environmental factors.


wow I never knew it was so involved. The designs of the casino gaming tables have always looked very clear and easy to read, but I didn't know it was also for security cameras and viewing at angles.

Turnbasedlife wrote:

Too many people started doing graphic design work in Photoshop for print which is a program that should never had been used that way. This is coming from a person who uses Photoshop for "art" and "photography" assets since version 2.5 but uses Illustrator and vector programs for graphic design and communicating.


I think alot of artists for game companies do use Illustrator - the good ones anyways. The ones that use raster applications are very apparent. A counter with the commander's face on it and 5 different numbers in different colors all around it looks great! At 1500x1500 pixels on a screen. Reduce it in size in photoshop and it may still seem clear enough, and I suspect the "artist" is very reluctant to "simplify" or change their artwork that they spent so much time making on a computer screen (and got paid near zero to do it), so they convince themselves its fine, and sends it off to the (cheapest) printer to print the counters, and what they get back are counters that are a murky mess. I suspect many of these graphic "disasters" are because small fledgling game companies don't have the money to pay for proofs from one printer, let alone 2 or 3. And the "artist" is usually whoever is there that can "do" photoshop or paint shop pro.

Turnbasedlife wrote:

And the crazy part is those who know nothing about art or design can tell something is off even if they don't have the experience or words to say it. They feel overwhelmed or the game is too "busy" and are quickly turned off.


Thats quite right. I can tell what is good design, and what is poor design, with a glance. But .... I am not an artist, and I can't create good designs (unless by accident), and I often can't quite tell why one design looks better than another. But I guess it comes down to the "fung-shway" of how the colors work with each other, spacing, and sizes of elements of the art.

Thanks for your very informative and entertaining post!



2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Wroderick Burke
United States
Las Vegas
Nevada
flag msg tools
mbmbmbmb
Your welcome,

Sorry if my post was so terribly long! So much info and I still feel I only scratched the surface. Since you mentioned raster and how artists may be intimidated by having to work in Illustrator I felt I would share a piece I drew about 4 years ago that is all vector. I try to limit each key area of the sketch to using only 3 colors (3 for skin, clothes, etc) for commercial printing purposes. Ironically it got noticed and applauded by Adobe and is a method I've been experimenting with for all my artwork.

2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Cisco Serret
United States
Austin
Texas
flag msg tools
OverText
badge
WOOF!
Avatar
mbmbmbmb
Thats pretty cool. Limiting colors yet showing a complex image is a skill I wish I had. Theres some filter in photoshop that creates two-tone images, but it never looks very good, and if I try to "improve" it, it gets worse!

Have you done any box art cover for games?
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Wroderick Burke
United States
Las Vegas
Nevada
flag msg tools
mbmbmbmb
I haven't had the chance to do covers for games yet. To be honest I am hoping to open shop next year when my son is older providing graphic design, video work, and even some artwork and typesetting. Been networking with a few publishers and designers and open to meet more when daily life frees me up for taking on deadlines. I tend to work 12 hours or longer a day when on a job, so it's tricky being the main parent at home with a 2 year old lol. Next year is looking to be different on our scheduling so I can afford to take on deadlines.

Back when I was working full steam I did work for CD's, DVD's, full large format posters and other promotional materials for my clients including vinyl signage for company vehicles.

Thing about color is value and tone. Have you started out painting over grayscale yet? In Photoshop especially its best to start out with a black and white gray scaled image. Then you make 3 separate layers set to "multiply" for each main color and just paint over the top of the b & w image. It's basically a color separation technique that comic artists use.

Eventually you get to what old schoolers called "training the eye" when it comes to color. Where one color can be 3 or 4 all based on the area of tones they are painted over just out of practice. I did it for such a long time that I no longer use grayscale in a vector image. I use a addition through subtraction method where when I erase a color on one layer it reveals a slightly darker color underneath.
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Cisco Serret
United States
Austin
Texas
flag msg tools
OverText
badge
WOOF!
Avatar
mbmbmbmb
I have pretty much zero graphics education or training, other than a helpful graphic artist at one company who taught me how to use photoshop, filters, and layers. I know about "multiply" and "subtract", but don't really know how they are supposed to be used.

I did write a graphics program that used vector graphics (svg) for drawing counters and a map, but that was very old, messy code, and so I'm doing it over again. Heres a counter. That tank took a while do draw out in svg.

2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Carl Fung
United States
Old Greenwich
Connecticut
flag msg tools
Avatar
mbmbmbmb
Cisco Serret wrote:
I have pretty much zero graphics education or training, other than a helpful graphic artist at one company who taught me how to use photoshop, filters, and layers. I know about "multiply" and "subtract", but don't really know how they are supposed to be used.

I did write a graphics program that used vector graphics (svg) for drawing counters and a map, but that was very old, messy code, and so I'm doing it over again. Heres a counter. That tank took a while do draw out in svg.



ehhh... the counter name says Sturmgeschutz but that's a silhouette of a Jagdpanzer IV. If you spent a lot of time to draw the vehicle image then you can rename the counter to save you time!
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Cisco Serret
United States
Austin
Texas
flag msg tools
OverText
badge
WOOF!
Avatar
mbmbmbmb
calvinboy24 wrote:
ehhh... the counter name says Sturmgeschutz but that's a silhouette of a Jagdpanzer IV. If you spent a lot of time to draw the vehicle image then you can rename the counter to save you time!


Oh da**it! Ok, I'll rename it! surprise
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Front Page | Welcome | Contact | Privacy Policy | Terms of Service | Advertise | Support BGG | Feeds RSS
Geekdo, BoardGameGeek, the Geekdo logo, and the BoardGameGeek logo are trademarks of BoardGameGeek, LLC.