cfimage generating unreadable CAPTCHAs

I was recently building a new page for a client who required a CAPTCHA to prevent spamming. Great, I thought: I can use ColdFusion 8’s <cfimage> tag; which I did, and it was really simple to do.

Shortly after the page went live, I started getting complaints that a lot of the time, the CAPTCHAs were dark, murky, and often unreadable. I couldn’t work out why: I’d done some test pages with <cfimage>, and they always looked perfect…

More test pages, and they still looked fine; but on the client’s page they were still really dark. Extensive Googling provided no solutions – or even any hint that anyone else might be having the same issue!

And then it hit me: the problem was that the page had a black background; the generated CAPTCHA images had an alpha-transparency background – and so the black was showing through, and making everything dark.

As an example, here are a couple of <cfimage>-generated captchas, as they would appear on a white page:

cfimage CAPTCHA as seen on a white background

And here are the same images on a black background:

cfimage CAPTCHA as seen on a black background

The solution, since you can’t apply a background-color directly to the <cfimage>, is to wrap your CAPTCHA image in a <div> the same size as the image, and set a background-color of white on that.

And Adobe: please, in the next bug-fix for CF8, add a solid white base layer to the generated CAPTCHA images…

Posted at 12:14 PM on 14 January, 2008, in ColdFusion

7 replies to “cfimage generating unreadable CAPTCHAs”

On 15 January, 2008 at 12:22 PM, Ben Nadel wrote:
Seb, very interesting. What's strange is that on the white background, these images don't seem to have a transparent background. Even the ones you have have a pink and light gray background respectively. I wonder why those same images seem to have *no* background on darker pages.
On 15 January, 2008 at 12:37 PM, Seb Duggan wrote:
The pink background is actually a much darker colour, but with a high transparency (or is that low?) - probably about 5-10%. So, on the white background it shows as pink; against the black it becomes a really dark pink.

Similarly with the grey one - it's actually black but almost totally transparent, which when overlaid on black just gives you black!
On 18 January, 2008 at 4:50 AM, Hemant wrote:
If you use the <img> div tag for the background, will it help?

We have logged a bug for the same.
On 18 January, 2008 at 7:53 AM, Seb Duggan wrote:
@Hemant: not quite sure what you mean? I have a <div> wrapped around the cfimage to provide a background; not sure how you'd do this with an <img> tag?
On 23 January, 2008 at 4:24 AM, Hemant wrote:
I think I misunderstood it a little bit. We have logged a bug for the same.

Thanks,
Hemant
On 17 April, 2008 at 7:08 PM, Seb Duggan wrote:
Doesn't seem to be fixed in ColdFusion 8.01...
On 3 June, 2009 at 2:49 PM, Pablo wrote:
You could simply add a style-tag to the CFIMAGE, works fine: <cfimage action="captcha" text="#word#" difficulty="low" fontSize="30" width="300" height="45" style="background-color:white;">